小程序云开发入门——分页加载数据（2）

用云函数做分页加载

1.新建一个fenyeyun的页面和一个fenye的云函数

2.wxml和wxss与上一节小程序的分页加载代码一样

<view wx:for="{{list}}">
    <view class="num">
    {{item.num}}
    </view>
</view>

.num{
    height: 50px;
    background-color: greenyellow;
    border-bottom: 1px solid black;
}

3.编写index云函数，注意初始化环境

cloud.init({
    env:cloud.DYNAMIC_CURRENT_ENV//选择当前的云环境
})

// 云函数入口函数
exports.main = async (event, context) => {
    return await cloud.database().collection('num')
   .skip(event.len)//做分页用
   .limit(event.pageNum)//每页加载多少条
   .get()
}

补充知识点await

来源：(1条消息) JS中的async/await的用法和理解_像风一样自由-CSDN博客 

4.fenyeyun.js的代码，与之前的大同小异

Page({
    data: {
        list: []
    },
    onLoad: function (options) {
        this.getList()
    },
    getList() {
        wx.showLoading({
            title: '加载中....',
        })
        let len = this.data.list.length
        console.log('当前list的长度', len)
        //调用云函数的方法
        wx.cloud.callFunction({
                name: 'fenye',
                data: {
                    len: len, //做分页用的
                    pageNum: 30 //每页加载30条数据

                }
            }).then(res => {
                wx.hideLoading() //  加载成功就隐藏加载中
                console.log('调用云函数成功了', res.result.data)
                let dataList = res.result.data //加载最后一页会返回空数据，dataList数组长度为0
                if (dataList.length <= 0) {
                    wx.showToast({
                        icon: 'none',
                        title: '没有更多数据了',
                    })
                }
                this.setData({
                    //concat方法能将之前res.data里的数据附着在现在的data后面
                    list: this.data.list.concat(dataList )
                })
            })
            .catch(err => {
                console.error('调用云函数失败了', err)
            })





    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.getList()
    },

})

 实现效果：可以一次加载100条以内