Angbike个人博客 > WeChat > 微信小程序简单实现上拉触底onReachBottom数据分页请求

微信小程序简单实现上拉触底onReachBottom数据分页请求

实现思路:
通过小程序上拉触底onReachBottom事件触发数据第二次请求,上拉触底一次请求分页页码加一,每次请求10条数据,在请求函数中通过函数concat来处理数据累加问题,common.WechatRequest为封装的小程序wx.request函数。

WXML代码:

<view hidden="{{noDataPrompt}}">
    {{promptText}}
</view>
<view wx:for="{{inquiryDatas}}" wx:key="{{index}}"></view>

JS代码:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    inquiryDatas: [],
    noDataPrompt: true,
    promptText: '无记录',
    pageCurrent: 1,
    pageSize: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    that.getTestData(1, 10, id, false);
  },

  /**
   * 获取记录
   */
  getTestData: function (pages, sizes, userIds, flag) {
    let that = this;
    let url = '接口地址';
    let header = { 'Authorization': 'Bearer ' + token, 'content-type': 'application/x-www-form-urlencoded' };
    let data = { 'pageNo': pages, 'pageSize': sizes, 'userId': userIds };
    common.WechatRequest(url, data, header, 'POST', 'json', 'text', res => {
      if (res.data.code == 200) {
        let inquiryArr = res.data.data.records;
        if (inquiryArr.length > 0) {
          if (flag){
            that.setData({
              noDataPrompt: true,
              pageSize: res.data.data.pages,
              inquiryDatas: that.data.inquiryDatas.concat(inquiryArr)
            })
          } else {
            that.setData({
              noDataPrompt: true,
              pageSize: res.data.data.pages,
              inquiryDatas: inquiryArr
            })
          }
        } else {
          that.setData({
            noDataPrompt: false
          })
        }
      } else {
        common.showToast('记录加载失败');
      }
      wx.hideLoading();
    }, null, null);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    let that = this;
    let pageNo = that.data.pageCurrent + 1;
    let pageSize = that.data.pageSize;
    that.setData({
      pageCurrent: pageNo
    })
    if (pageNo > pageSize) {
      wx.showToast({
        title: '无更多数据',
        icon: 'none'
      });
    } else {
      that.getTestData(pageNo, 10, id, true);
    }
  },
  
})

博客评论已关闭