scroll-view组件实现下拉刷新, 拉到底加载更多

Posted fps2tao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scroll-view组件实现下拉刷新, 拉到底加载更多相关的知识,希望对你有一定的参考价值。

官方文档已声明,即使在page.json和app.json中开启下拉刷新,scroll-view组件也是不支持的。但我们可以通过曲线救国的方法来实现

实现代码

// wxml
 <scroll-view  style=‘height: 300px;‘ 
    scroll-y="true" 
    scroll-top="scrollTop"
    bindscroll="scrollFn"
    bindscrolltolower="loadMore"
  >   
    <view class="list" wx:for="list" wx:key="index">item</view>
 </scroll-view>  

 

// js
Page(
  data: 
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    timer: null, // 保存定时器
    scrollTop: 5 // 设定触发条件的距离
  ,
  onPullDownRefresh() 
  // 监听该页面用户下拉刷新事件
  // 可以在触发时发起请求,请求成功后调用wx.stopPullDownRefresh()来结束下拉刷新
   console.log(‘下拉拉拉‘)
  ,
  refresh()  // 函数式触发开始下拉刷新。如可以绑定按钮点击事件来触发下拉刷新
    wx.startPullDownRefresh(
      success(errMsg) 
        console.log(‘开始下拉刷新‘, errMsg)
      ,
      complete() 
        console.log(‘下拉刷新完毕‘)
      
    ),
  ,
  scrollFn(e)  
  // 防抖,优化性能
  // 当滚动时,滚动条位置距离页面顶部小于设定值时,触发下拉刷新
  // 通过将设定值尽可能小,并且初始化scroll-view组件竖向滚动条位置为设定值。来实现下拉刷新功能,但没有官方的体验好
    clearTimeout(this.timer)
    if (e.detail.scrollTop < this.data.scrollTop)      
      this.timer = setTimeout( () => 
        this.refresh()
      , 350)
    
  ,
  loadMore()  // 触底加载更多
        let len = this.data.list.length,
        lastItem = this.data.list[len - 1];
        for(let i = 0; i< len; i++) 
          this.data.list.push(lastItem + i + 1)
          this.setData(
            ‘list‘: this.data.list
          )
        
   
)

 

onPullDownRefresh 和 wx.startPullDownRefresh 的区别

onPullDownRefresh : 下拉刷新。官方认为下拉一定距离并释放,为一次完整的下拉刷新,页面的onPullDownRefresh 才能监听到。因此,如果触发开始下拉,但仍长按不释放,不会被识别为一次完整的下拉刷新,onPullDownRefresh 无法监听到
wx.startPullDownRefresh:开始下拉刷新。因此即使下拉一定距离触发仍长按不释放,也能触发。


说的有点乱,可以按正常下拉释放和下拉并长按一段时间再释放,来查看控制台结果的差异

 

转 : https://blog.csdn.net/ishowman/article/details/79536163

 

以上是关于scroll-view组件实现下拉刷新, 拉到底加载更多的主要内容,如果未能解决你的问题,请参考以下文章

小程序下拉刷新

微信小程序如何下拉刷新上拉无限推送。

小程序怎么实现下拉刷新

微信小程序scroll-view不能实现下拉刷新

小程序scroll-view实现三级分类左右联动,上拉加载以及下拉刷新

Vue 利用Vant组件实现数据的上拉刷新,下拉加载