小程序触底加载数据

Page({
    data: {
        page: 0, //当前y页数 默认是0
        evaluation: [],//对应数据
    },
    onLoad: function(e) {
        this.getStaffComment(this.data.page);
    },

    //获取列表
    getStaffComment: function(page) {
        wx.showLoading({
            title: '加载中',
        })
        var data = {
            page: page,
        }
        util.apiRequest('xxx', data).then(data => { //封装好的接口
            wx.hideLoading()
            if (data) {
                var evaluation = this.data.evaluation; //获取空的数组
                evaluation = evaluation.concat(data); //用concat先定义evaluation;追加数据到evaluation空的数组
                this.setData({
                    evaluation: evaluation, //evaluation对应data里面的evaluation
                    page: page,
                })
            }
        }
    },
    // 触底加载
    onReachBottom: function() {
        var newpage = (this.data.page + 1); //页数触底加1
        this.getStaffComment(newpage);
    }
})

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序触底分页加载数据可以通过监听页面滚动事件来实现。 1. 在页面的onLoad生命周期函数中,初始化一个变量page,表示当前页面的页数,初始为1。 2. 在页面的onReachBottom生命周期函数中,判断当前页面是否已经加载完所有数据,如果是,则直接返回;如果不是,则将page加1,发送请求获取下一页数据,并将新数据合并到原有数据数组中。 3. 在页面中渲染数据时,使用wx:for循环遍历数据数组。 以下是示例代码: ``` Page({ data: { dataList: [], // 数据数组 page: 1, // 当前页数 hasMoreData: true // 是否还有更多数据 }, onLoad() { this.loadData() }, onReachBottom() { if (!this.data.hasMoreData) return; this.setData({ page: this.data.page + 1 }) this.loadData() }, loadData() { wx.request({ url: 'https://xxx.com/api/data', data: { page: this.data.page }, success: res => { const newData = res.data.dataList const totalData = this.data.dataList.concat(newData) const hasMoreData = newData.length > 0 this.setData({ dataList: totalData, hasMoreData: hasMoreData }) } }) } }) ``` 在这个示例中,我们将数据请求放在了loadData函数中,当页面加载时和触底时都会调用该函数。请求返回后,将新数据合并到原有数据数组中,并判断是否还有更多数据,如果没有,则将hasMoreData改为false,避免继续请求。 在实际开发中,根据接口返回的数据格式和需要展示的数据结构,代码可能会有所不同,需要根据具体情况进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值