微信小程序 - （下拉）加载更多数据

注意和后端配合就行了，前端也只能把数据拼接起来！

无论是下拉加载还是加载更多，一样的道理！

注意首次加载传递参数

注意每次加载数据数

wxml

    <view class=‘table-rank‘>
      <view class=‘tables center‘ wx:for="{{ranklist}}" wx:for-index="idx" wx:key="prototype">
        <view class=‘stage-rank‘>
          {{idx+1}}
        </view>
        <view class=‘name‘>{{item.name}}</view>
        <view class=‘price‘>{{item.count}}</view>
      </view>
    </view>

    <view class=‘more‘>
      <button loading="{{loading}}" disabled="{{disabled}}" catchtap="setLoading">{{loadText}}</button>
    </view>

js

var app = getApp().globalData;

Page({
  data: {
    loadText: ‘加载更多‘,
    ranklist: [],
    count: 1
  },

  onLoad: function(res) {
    // 首次加载：传参数num:0
    let num = 0;
    let _page = this;
    let uid = wx.getStorageSync(‘uinfo‘).uid;

    wx.request({
      url: ‘url‘,
      data: {
        uid,
        num
      },
      header: {
        ‘content-type‘: ‘application/json‘
      },
      method: ‘GET‘,
      dataType: ‘json‘,
      responseType: ‘text‘,
      success(res) {
        _page.setData({
          ranklist: res.data.all_list,
          me: res.data.me
        });
      }
    })
  },

  //点击 加载更多 按钮
  setLoading(e) {

    let _this = this;
    let _page = this;

    // 暂存数据
    let ranklistBefore = _this.data.ranklist;

    let uid = wx.getStorageSync(‘uinfo‘).uid;

    // 每次加载数据条数(10)
    let num = _this.data.count++ * 10;

    wx.request({
      url: app.api.simulation_ranking,
      data: {
        uid,
        num
      },
      header: {
        ‘content-type‘: ‘application/json‘
      },
      method: ‘GET‘,
      dataType: ‘json‘,
      responseType: ‘text‘,
      success(res) {
        // 每次加载数据,请求一次就发送10条数据过来
        let eachData = res.data.all_list;

        if (eachData.length == 0) {
          wx.showToast({
            title: ‘没有更多数据了!~‘,
            icon: ‘none‘
          })
        } else {
          wx.showToast({
            title: ‘数据加载中...‘,
            icon: ‘none‘
          })
        }

        _page.setData({
          loadText: "数据请求中",
          loading: true,
          ranklist: ranklistBefore.concat(eachData),
          loadText: "加载更多",
          loading: false,
        });
      }
    })
  }
});

原文地址：https://www.cnblogs.com/cisum/p/10178893.html