美文网首页
小程序 scroll-view上滑加载

小程序 scroll-view上滑加载

作者: FSYu | 来源:发表于2020-06-29 11:19 被阅读0次

    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
            })
          }
       })
     }
    

    相关文章

      网友评论

          本文标题:小程序 scroll-view上滑加载

          本文链接:https://www.haomeiwen.com/subject/iphofktx.html