分页加载数据

首先，第一部分js（也是最重要的部分）：

//index.js
//获取应用实例
const app = getApp()
var page = 1;//初始化页（定义在以下data中也是可行）
Page({
  data: {
    list:[],
    totalpage:0,
  },
  //初始化加载数据
  onLoad: function () {
    this.getList(0)
  },
  getList: function() {
    var e = this;
    //显示 加载中的提示(借鉴)
    wx.showLoading({
       title: '数据加载中...',
    })
    var lastList = this.data.list;//获取上次请求的数据，下面需要用到
    wx.request({
        url:"commission/order/get_list?page" + page,//请求url,一般微信小程序都有封装公用的url,根据自己的实际情况来即可
        method:'GET',//请求方式
        success:function(t){
            console.log(t)//自行查看数据接口，获取数据列表，本人数据类型是在data.list下
            var newList = lastList.concat(t.data.list);//concat函数为合并数组
            e.setDate({
                list:newList;
                totalpage:t.data.page;//获取总页数
            })
            //隐藏 加载中的提示
            wx.hideLoading();
        }
    })
  },
  //onReachBottom函数即为微信内置函数，直接拿来用即可；作用就是滑动到底部，会自动触发该函数
  onReachBottom:function(){
      page++,
      if(this.data.totalpage > page){
          this.getList(page)
      }else{
          console.log('到底了')
      }
  }
})
 

或第二种场景(根据自己的需求而定)

//index.js
//另外一种情况：
// 1.当后端没有返回总页数
// 2.后端数据只有返回总条数时
const app = getApp()
var page = 1;//初始化页（定义在以下data中也是可行）
Page({
  data: {
    list:[],
    totalpage:0,
    pagesize:20,
  },
  //初始化加载数据
  onLoad: function () {
    this.getList(0)
  },
  getList: function() {
    var e = this;
    //显示 加载中的提示(借鉴)
    wx.showLoading({
       title: '数据加载中...',
    })
    var lastList = this.data.list;//获取上次请求的数据，下面需要用到
    wx.request({
        url:"commission/order/get_list?page" + page + '&pagesize=' this.data.pagesize,//请求url,一般微信小程序都有封装公用的url,根据自己的实际情况来即可
        method:'GET',//请求方式
        success:function(t){
            console.log(t)//自行查看数据接口，获取数据列表，本人数据类型是在data.list下
            var total = parseInt(t.total / this.data.pagesize);// parseInt取整（或进一,取整有一定的弊端，进一理论上没什么问题）  t.total / this.data.pagesize 总条数/每页显示数据 = 总页数
            var newList = lastList.concat(t.data.list);//concat函数为合并数组
            e.setDate({
                list:newList;
                totalpage:total;//获取总页数
            })
            //隐藏 加载中的提示
            wx.hideLoading();
        }
    })
  },
  //onReachBottom函数即为微信内置函数，直接拿来用即可；作用就是滑动到底部，会自动触发该函数
  onReachBottom:function(){
      page++,
      if(this.data.totalpage > page){
          this.getList(page)
      }else{
          console.log('到底了')
      }
  }
})

第二步，就是wxml页面数据的遍历：

这里就不多说了，也就是一个遍历的问题

<!--index.wxml-->
<view wx:for="{{list}}">
    <view  data-obj={{item}} data-index='{{index}}'>
     <view >ID：{{item.id}}</view>
     <view >昵称：{{item.nickname}}</view>
    </view>
</view>
 

以上都是从自己项目中搬过来的，亲测有效。
————————————————
版权声明：本文为CSDN博主「verry_body」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/verry_body/article/details/109464377