小程序实现分页效果

方法一

首先说明小程序的两个事件

<1>页面相关事件处理函数–监听用户下拉动作

onPullDownRefresh: function () { },

<2>页面上拉触底事件的处理函数

onReachBottom: function () { },

监听用户下拉动作

onPullDownRefresh: function () {
  console.log(‘下拉刷新…‘);
  wx.showNavigationBarLoading() //在标题栏中显示加载
  this.data.pageNo = 1
  // 刷新并初始化数据
  this.getdata();
  //延时处理数据
  setTimeout(() => {
   //关闭加载  wx.hideNavigationBarLoading(); wx.stopPullDownRefresh(); },
1000); },

监听上拉触底动作

onReachBottom: function () {
    //上拉分页,将页码加1,然后调用分页函数loadRoom()
    var that = this;
    var pageNo = that.data.pageNo;
    that.setData({
      pageNo: ++pageNo
    });
    wx.showToast({
        title: ‘加载中..‘,
        icon: ‘loading‘
      }),
      setTimeout(function () {
        that.loaddata();
      }, 1000)
  },

注意:

项目需求如果上拉触底是在原有数据基础上,在数据集合后面继续追加数据,可以在数据加载的接口中这样写

if (i.state == 200) {
        console.log(i.data)
        //这个地方判断当前pageNo是否已经大于1
        if (that.data.pageNo > 1) {
          //定义一个aa变量,将之前的数据赋值给aa      
          let aa = that.data.mydata
          //通过循环继续往aa里追加数据  
          for (let index = 0; index < i.data.length; index++) {
            const element = i.data[index];
            aa.push(element)
          }
          that.setData({ mydata: aa})
        } else if (that.data.pageNo == 1) {
          let aa = [];
          for (let index = 0; index < i.data.length; index++) {
            const element = i.data[index];
            aa.push(element)
          }
          that.setData({mydata: aa})
        }
        console.log(that.data.mydata)
} else {
   wx.showToast({
     title: i.data.msg,
     icon: ‘none‘
   })
}

 

小程序实现分页效果

上一篇:C语言结构体内存分配详情


下一篇:微信卡券核销code接口 返回系统繁忙(-1)