收藏
评论

基于scroll-view的下拉刷新组件(android和ios都支持)

内容详情参见github

微信小程序 wepyjs 基于scroll-view 下拉刷新

说明

官方scroll-view组件不支持下拉刷新,只有滚到顶部刷新的机制,所以做一个基于scroll-view的下拉刷新组件。

使用

安装组件

npm i wepy-scroll-view-refresh --save-dev

使用提示

1、该组件外面必须套用scroll-y的scroll-view(暂时不支持横向滚动)
2、scroll-view必须使用scroll事件实时向该组件传递一个scrollTop(scroll-view的scrollTop)参数
3、内容区域用卡槽slot="refresh-content"部分填充
4、组件刷新会触发refresh事件,父页面需要在events内接收一个refresh的事件
5、重置刷新组件调用this.$invoke('refresh', 'reset')方法

使用示例

// index.wpy
<template>
  <view class="kai-content">
    <scroll-view scroll-y="{{true}}" class="refresh-scroll__container" scroll-with-animation="{{true}}" bindscrolltolower="lower" style="width: 100vw;height:100vh;" catchscroll="scroll">
      <view style="width:100%;height:100%;">
        <refresh :scrollTop.sync="scrollTop">
          <view slot="refresh-content" style="margin-top:45px;">
            <repeat for="{{[0,1,2,3,4,5,6,7,8,9,10]}}" index="i" item="item" key="new-{{i}}">
              <view  class="new-block">
                {{i}}
              </view>
             </repeat>
           </view>
        </refresh>
      </view>
   </scroll-view>
</view>
</template>
<script>
import wepy from 'wepy'
import Refresh from 'wepy-scroll-view-refresh'

export default class ScrollViewRefresh extends wepy.page {
  components = {
    refresh: Refresh
  }

  data = {
    scrollTop: 0
  }

  methods = {
    lower (index) {
      console.log(index)
    },
    scroll (e) {
      this.scrollTop = e.detail.scrollTop
      this.$apply()
    }
  }

  events = {
    'refresh': (data) => {
      setTimeout(() => {
        this.$invoke('refresh', 'reset')
      }, 3000)
    }
  }
}
</script>

刷新重制方法

this.$invoke('refresh', 'reset')

更多说明

参考原版插件

收藏

4 个评论

  • stone
    stone
    2019-12-11

    很棒

    2019-12-11
    赞同
    回复
  • 神经蛙
    神经蛙
    2018-10-08

    ios上会触发橡皮筋效果,发生抖动

    2018-10-08
    赞同
    回复 2
    • Chaunjie
      Chaunjie
      2018-10-09

      可能和ios的弹性滚动有关系,目前没有好的解决方案

      2018-10-09
      2
      回复
    • jcy😁
      jcy😁
      2019-05-19

      可以判断在开始滚动之前将scroll-view的scroll-y设为false 禁用滚动,刷新完成后继续滚动

      2019-05-19
      回复
  • 2018-09-29

    有没有原生实现的Demo啊?项目没有用框架....

    2018-09-29
    赞同
    回复 1
    • Chaunjie
      Chaunjie
      2018-09-29

      直接把逻辑代码拷贝到你的项目就好了

      2018-09-29
      回复
  • 我不跟你玩了
    我不跟你玩了
    2018-04-13

    感恩,项目中已使用。

    2018-04-13
    赞同
    回复
登录 后发表内容