微信小程序分页查询最佳实践

原创已于 2023-05-11 10:49:35 修改 · 456 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#微信小程序 #小程序 #javascript

于 2023-05-11 09:14:12 首次发布

我们在开发微信小程序分页查询时，很多时候我们都需要先获得记录集的个数后再去处理分页查询逻辑。

本案例中的分页查询，减少了获得记录集个数，代码更加简洁。

const app = getApp()
Page({
    data: {
        MAX:20,//每页显示的记录数量
        dRes: [],
        isOnReachBottoming: false, //标记是否正在上拉刷新中 【正在上拉刷新中 true】
        dataPage: 0, //分页显示第N页
        loadingComplete: false, //记录全部加载完毕
    },

    onLoad: function (options) {
        this.onReachBottom()
    },

    onReachBottom: function () {
//*******************************************************
//*      微信版蚂蚁森林上线了！微信搜蚂蚁森林立即体验！     *
//*******************************************************
        let self=this
        //如是正在刷新或商品加载完毕，退出
        if ((self.data.isOnReachBottoming) || (self.data.loadingComplete)) return 
        self.data.isOnReachBottoming = true
        app.call('get', {
            type: 'docGet',
            sheet: 'category',
            where: {
                 _state: true,
            },
            limit: self.data.MAX,
        }).then(res => {
            let tempRes = res.list || []
            if (tempRes.length > 0) {
                self.data.dRes.push(...tempRes)
                self.data.dataPage = self.data.dataPage + 1
                //判断是否已查询结束
                if (tempRes.length<self.data.MAX) {
                    self.data.loadingComplete = true
                }
                self.setData({
                    dRes: self.data.dRes,
                    loadingComplete: self.data.loadingComplete,
                    isOnReachBottoming: false
                })
            } else {
                this.setData({
                    dRes: this.data.dRes,
                    loadingComplete: true,
                    isOnReachBottoming: false
                })
            }
        }).catch(err => {
            self.setData({
                dRes: self.data.dRes,
                loadingComplete: true,
                isOnReachBottoming: false
            })
        })
    }
})