微信小程序下拉刷新上拉触底分页

最新推荐文章于 2025-03-13 09:51:25 发布

原创

最新推荐文章于 2025-03-13 09:51:25 发布 · 927 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #微信小程序 #前端

本文介绍如何在小程序中实现下拉刷新和上拉触底功能，包括配置方法及具体代码实现。通过设置enablePullDownRefresh:true启用下拉刷新，并在onPullDownRefresh()和onReachBottom()函数中编写数据更新逻辑。

下拉刷新

1、在需要下拉刷新页面的json配置页，设置"enablePullDownRefresh":true，默认为false

2、在* 页面相关事件处理函数--监听用户下拉动作 * onPullDownRefresh() 中添加要刷新的内容。

上拉触底

1、在*页面上拉触底事件的处理函数* async onReachBottom() 中添加要触底刷新的内容

2、做分页显示时，需要在函数中添加判断是否为最后一页数据，否则小程序会自动随机读取。

以下为实例代码：

  /**
   * 页面的初始数据
   */
  data: {   
    page:0,//表示第一页
    totalCount:0,//数据条数
    pageSizes:5,//每页显示5条记录
    haveData:true,//数据库中存在记录
  },
  //获取数据库记录数
  getTotalCount(){
    return new Promise((resolve,reject)=>{
      db.collection('cloudOrder').count().then(res=>{      
        this.setData({
          totalCount:res.total
        })
        resolve({status:'ok'})
      }).catch(e=>{
        reject({status:e})
      })
    })    
  },
//获取订单列表
  getOrderList(){
    return new Promise((resolve,reject)=>{        
      const {orderAll,page,pageSizes,totalCount} = this.data;
    //如果为最后一页，则返回
      if(orderAll.length