微信小程序前端分页实现思路以及示例

吃猫的鱼Code

修改于 2023-02-14 22:05:39

1.3K0

修改于 2023-02-14 22:05:39

今天在学习微信小程序的时候，遇到了前端需要做下拉刷新的一个分页逻辑的操作，写本文章来记录以下实现微信前端下拉分页的实现。

主要思路

　使用微信小程序的下拉刷新的监听事件，每次监听到就调用一次接口，获取数据的方法。同时在监听事件中需要做一个节流的判断，需要定义一个变量isLoading要是isLoading变量的值为true证明还在加载，这个时候就直接return。避免还未加载完成重复请求接口。

　分页方法实现思路：通过调用外部接口，传递页码的信息以及一页需要的条数，然后将获取到的数据与旧的数据进行合并处理 list:oldList.concat(newList) 然后page进行增加处理。

注意下面示例代码中的page并不是指页码，而是指当前加载到第几条数据（由于后端这样写了所以并不传递页码，而是传递第几条数据开始）

下面是示例代码：

// pages/home/home.js
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    show:false,
    list:[],
    page:0,         
    pageSize:10,   
    isEnd:false,
    isLoading:false     
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let that = this;
    app.checkSeesion()
    //判断onLaunch是否执行完毕
    if (wx.getStorageSync('token')){
      this.getPagesList();
    }else{
      app.checkLoginReadyCallback = res => {
       this.getPagesList();
      };
    }

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.isLoading){
      return
    }    
    if(!this.data.isEnd){
        this.getPagesList() 
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },





  //自定义方法


//获取页面集方法
  getPagesList(){
  this.setData({
      isloading:true
    })
  wx.showLoading({
    title: '加载中',
  })
  wx.request({
      url:app.globalData.url+"userOperation/PagesList",        //请求的接口地址，基于https协议
      method:'GET',                    //请求方式
      data:{                            //发送到服务器的数据
        token:wx.getStorageSync('token'),                    
        page:this.data.page,
        pageSize:this.data.pageSize
      },
      success:(res) => {
        console.log(res)
        let newList = res.data.data
        let oldList = this.data.list
        if (newList.length === 0) {
          wx.showToast({
            title: '没有更多数据了',
            icon: 'none',
            duration: 2000
          })
          this.setData({ 
            isEnd: true 
          })
          return
        }
        this.setData({
          list:oldList.concat(newList),
          page:this.data.page+this.data.pageSize
        })
      },complete:()=>{
        wx.hideLoading()
        this.setData({
        isloading:false
       })
      }
    })
},
//显示弹出层
 showPopup() { 
         this.setData({ show: true });
      }, 
  //关闭弹出层
  onClose() {
         this.setData({ show: false }); 
       }
  
})

wxml

<block wx:for="{{list}}" wx:for-index="id" wx:for-item="list">
<view>
<text>
留言内容：{{list.commentContent}}
留言回复：{{list.replyContent}}
</text>
</view>
</block>