小程序之列表滚动加载

小程序

html

<scroll-view  scroll-y="true"   bindscrolltolower="ScrollLower">
	<view wx:for="{{deviceList}}"></view>
	<view class="loading" hidden="{{!searchLoading}}">正在载入更多...</view>
	<view class="loading complete" hidden="{{!searchLoadingComplete}}">已加载全部</view>
</scroll-view>
<view class='nod-text'>暂无数据</view>

script文件

  data: {
    deviceList:[],    //投诉建议列表
    deviceTotal: 0,    //投诉建议总数
    devicePages:0,     //投诉建议总页数
    deviceIndex:1,      //投诉建议当前页 
    deviceNoData: false, // 投诉建议 true 显示 false 不显示
  },

getListTest: function () {
    var _this = this;
    wx.showLoading({
      title: '加载中...',
    })
    const data = {
      allowPaging: true,
      pageIndex: _this.data.deviceIndex,
      pageSize: 10
    };
    console.info("第" + _this.data.deviceIndex +"页")
    app.requestwx(url, data, 'GET').then((res) => {
      wx.hideLoading()
      let Result = res.ResultList
      // 响应无数据 则提示无数据
      if (_this.data.deviceIndex == 1 && Result.length == 0){
        _this.setData({
          deviceNoData:true
        })
      }

      if (Result.length){
        _this.data.deviceTotal = res.TotalCount
        _this.data.devicePages = res.TotalPage
        let deviceListTemp = [];
        if (_this.data.deviceIndex > 1) {
          deviceListTemp = _this.data.deviceList.concat(Result);
          _this.setData({
            searchLoading: true, //"正在载入更多"显示
          });
        } else {
          deviceListTemp = Result;
        }

        _this.setData({
          deviceList: deviceListTemp, //获取数据数组
          noData: false //“没有数据”隐藏
        });
      }
    }).catch((errMsg) => {
      console.log(errMsg);
      wx.hideLoading()
    });
  },

// 滚动至低端事件
ScrollLower: function () {
    var _this = this;
    console.info("ScrollLower 第" + _this.data.deviceIndex + "页")
  
    if (_this.data.deviceIndex < _this.data.devicePages) {
      _this.setData({
        deviceIndex: _this.data.deviceIndex + 1,   //每次触发触底事件，把deviceIndex+1
      });
      _this.getListTest();
    } else if (_this.data.deviceIndex == _this.data.devicePages) {
      _this.setData({
        searchLoadingComplete: true, //“已加载全部”显示
        searchLoading: false, //"正在载入更多"隐藏
      });
    }
  },
onLoad: function (options) {
    this.getListTest()    
  }

至此下拉至scroll-view低端已自动更新deviceList数据。
整体思路为将页面数据显示在scroll-view中，每次下拉至低端会自动触发触底函数，判断页数如果为小余总页数则index+1请求下一页，显示对应提示文字，如果最新请求页等于总页数，则停止请求显示“”“显示全部”。

列表函数思路则为第一页就没有数据则显示无数据
index大于1时每次请求将请求到的数据和已有的渲染列表数据源拼接起来然后setData更新即可~
细节体验请忽略，自己优化，比如下方改成loading菊花，无数据图标设计一下即可

就酱紫。。。【告辞】[大笑]