小程序 scroll-view上滑加载

2020-06-29  本文已影响0人  FSYu

wxml

<scroll-view scroll-y="true" enable-flex="true" bindscrolltolower="getBottom" lower-threshold="200" style="max-height: 100vh"></scroll-view>

js

// data 数据
data: {
  list:[], // 列表数据
  page: 1, // 页数
  isLastPage: false, // 是否是最后一页
  isLoadInterface: false, // 是否触发上滑加载,为false触发
  pageSize: 10 // 每页数据个数
}

// 触底事件
getBottom: function () {
    console.log("到底了")
    if (!this.data.isLoadInterface && !this.data.isLastPage) { // isLoadInterface,isLastPage都为false触发
      this.setData({
        isLoadInterface: true,
        page: this.data.page + 1
      })
      this.getList(); // 获取数据
    }
  }

// 获取分页数据
getList: function () {
   this.setData({
     isLastPage: false
   })
  var _self = this;
  wx.request({
    url: 'test.php', //仅为示例,并非真实的接口地址
    data: {
      page: _self .data.page,
       pageSize: _self .data.pageSize,
    },
    header: {
      'content-type': 'application/json' // 默认值
    },
    success (res) {
      _self .setData({
        isLoadInterface: false
      })
      if(this.data.list.length == 0 || !this.data.list) { // 列表没数据
        this.setData({
          list: res.data.data,
          isLastPage: res.data.data.length >= this.data.pageSize? false: true
        })
      }else { // 列表有数据用 concat 拼接
        this.setData({
          list: res.data.data.length > 0? this.data.list.concat(res.data.data):this.data.list,
          isLastPage: res.data.data.length >= this.data.pageSize? false: true
        })
      }
   })
 }
上一篇下一篇

猜你喜欢

热点阅读