微信小程序：分页和加载更多

最新推荐文章于 2025-06-27 09:28:25 发布

qq_37461695

最新推荐文章于 2025-06-27 09:28:25 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序分页及加载更多

本文链接：https://blog.youkuaiyun.com/qq_37461695/article/details/82957944

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

6 篇文章

订阅专栏

本文详细介绍了在小程序中实现加载更多功能的具体步骤，包括wxml页面的代码展示、js初始数据设置、触底函数的使用及后台交互函数的编写，为开发者提供了完整的实践案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码吧。不足之处，多多指教，一起进步

1.wxml页面的最后敲上，css自己定义

<view class="loadmore" mtype="{{mtype}}" hidden="{{hidden}}"><text>已经没有更多了~</text></view>

2.js的初始数据中设置：

data: {
    page: 0,    //当前页
    totalPage: 0,   //总页数
    mtype: 1,    //加载更多动画显示类型
    hidden: true    //加载动画显示与隐藏
},

3.js的内置触底函数中如下操作

//页面滑动到底部
onReachBottom: function (e) {
    console.log("lower");
    var that = this;
    var page = that.data.page + 1;  //当前页+1 = 下一页
    that.getPhotoInfo(page);
},

4.js后台交互函数

getPhotoInfo:function(e){
    var that = this;
    var atPage = e; //当前页
    var params = {
        page: atPage //页数
    };

    if(atPage == 1){
        api.getPhotoInfo(params).then(res => {
            console.log(res)
        if (res['code'] == '200') {
            wx.stopPullDownRefresh(); //停止下拉刷新
            //更新数据
            that.setData( {
                photoInfo: res.data.list,
                page: atPage,
                totalPage: res.data.totalPage,
                hidden: true,
                mtype: 1
            });
        }
        })
    }else if(atPage <= that.data.totalPage){
        api.getPhotoInfo(params).then(res => {
            console.log(res)
        if (res['code'] == '200') {
            wx.stopPullDownRefresh(); //停止下拉刷新
            //更新数据
            that.setData( {
                photoInfo: that.data.photoInfo.concat(res.data.list),  //此处concat类似push，但又不完全是，可以测试下
                page: atPage,
                totalPage: res.data.totalPage,
                hidden: true,
                mtype: 1
            });
        }
        })
    }else {
        //更新数据，已经没有了 返回
        that.setData( {
            hidden: false,
            mtype: 1
        });
    }
},