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

转载

深圳市贝福科技 2019-07-10 17:58:00

文章标签 小程序下拉刷新 json 按钮点击事件函数式 文章分类 代码人生

官方文档已声明，即使在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
          })
        }
   }
})