收藏
评论

基于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')
最后一次编辑于  2018-04-13
收藏

7 个评论

  • Borderland_
    Borderland_
    2019-05-28

    楼主我想请问下,我使用了你这个插件然后头部设置了tab,然后内容区域下拉刷新得时候会卡顿一下才会拉下来是怎么回事啊,在开发工具没有问题得,手机才会。

    2019-05-28
    赞同
    回复
  • Chaunjie
    Chaunjie
    2018-04-26

    不会超过2m

    2018-04-26
    赞同
    回复
  • Chaunjie
    Chaunjie
    2018-04-24

    @iTouch 他这个是调用了Page的下拉刷新,然后设置了刷新的颜色和底色一样就看不出来了

    2018-04-24
    赞同
    回复
  • iTouch
    iTouch
    2018-04-20

    你看下 有车以后  这个小程序,我感觉他们是直接调用原生的下拉刷新API接口。但是却实现了头部tab 的固定,感觉体验非常好不知道是怎么实现的,你知道吗?

    2018-04-20
    赞同
    回复 1
    • kit
      kit
      2018-05-29

      position: fixed ?

      2018-05-29
      回复
  • Chaunjie
    Chaunjie
    2018-04-13

    欢迎大家使用,有问题也可以反馈给我

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