微信小程序云开发触底分页

西虹市大陆

已于 2022-09-17 09:43:01 修改

阅读量747

点赞数 1

分类专栏：微信小程序易懂教程文章标签：微信小程序 javascript 小程序

于 2022-09-16 09:10:01 首次发布

本文链接：https://blog.csdn.net/qq_24468953/article/details/124603693

版权

微信小程序易懂教程专栏收录该内容

13 篇文章 5 订阅

订阅专栏

微信小程序云开发触底分页

**摘要：**在手机端的列表分页大部分都是采用页面触底后加载下一页数据的方式，在微信小程序上开发触底分页功能是比较容易的，因为小程序提供了上拉触底函数onReachBottom，还能配置触底的距离，对开发者非常友好！完全不需要开发者自己监听触底事件，下面实践下怎么实现下拉触底并结合云开发分页。
demo图：
制作一个用户账号管理页面，分页获取账号数据。
在这里插入图片描述
1、view文件：
页面需要提示加载中或者没有更多了的提示，需要用一个字段来标识是否已经加载完毕。详情参考下面代码

<scroll-view scroll-y="true" class="page show">
  <view class="cu-bar bg-white solid-bottom margin-top">
    <view class="action">
      <text class="cuIcon-title text-orange "></text> 账号
    </view>
  </view>
  <view class="cu-list menu">
    <view class="cu-item {{modalName=='move-box-'+ index?'move-cur':''}}" wx:for="{{list}}" wx:key="index">
      <view class="content" data-account="{{item.accountId}}">
        <view class="text-grey">{{item.accountId}}-{{item.name}}-{{item.sex == 'boy'?'男':'女'}}</view>
      </view>
      <view class="action">
        <view class="text-green text-xs">学生</view>
      </view>
    </view>
  </view>
  <view class="cu-load bg-grey {{isLoad?'loading':'over'}}" wx:if="{{isShow}}"></view>
</scroll-view>

2、js代码：
由于这里是云开发，所以你需要开通云开发功能，可以查看我之前的文章微信小程序云开发入门（一）。这里需要注意一下，云开发限制了每页最高只能获取20条，云函数最多可以一次性获取100条。获取再多就只能通过分页了，而且获取的数据太多，对网络传输要求也很高，所以建议还是通过分页来获取数据，以最大限度提升页面加载的速度，提高用户体验。

const db = wx.cloud.database()
const _ = db.command
let isAll = false
Page({
    data: {
        list:[],//全部数据
        page:0,//页码
        isLoad:false,//是否加载完毕
        isShow:false//是否展示页脚
    },
    onShow(){
         //重新初始化
        isAll = false
        this.setData({
            page:0,
            list:[],
            isLoad:false,
            isShow:false
        })
        //首次加载数据
        this.getPages()
    },
    getPages(){
        let that = this
        that.setData({
            isLoad:true,
            isShow:true
        })
      db.collection('users').skip(that.data.page).get().then(res=>{
            console.log('res', res)
            let list = that.data.list
            //合并新获取的页数数据
            list = list.concat(res.data)
            //当获取的页数不够一页时判定为最后一页
            if(res.data.length < 20){
                isAll = true
                that.setData({
                    list:list,
                    isLoad:false
                })
            }else{
                that.setData({
                    list:list,
                    isShow:false
                })
            }
        })
    },
     /**
     * 触底分页
     */
    onReachBottom(){
        console.log('上拉触底事件触发')
        if(isAll){
            return false
        }
        this.setData({
            page:this.data.page+20
        })
        //每次下拉页数增加并获取数据
        this.getPages()
    }
});