微信小程序如何上拉加载下一页

变量

data: {
        videos: [],
        page: 1,
        pageSize: 8,
        isLastPage: false,
        tips: '上拉加载更多'
},

• videos 数据容器
• page 当前页数
• pageSize 一页的数据量
• isLastPage 当前是否最后一页
• tips 页尾提示信息

上拉事件

onReachBottom: function () {
        // 最后一页了，取消下拉功能
        if (this.data.isLastPage) {
            return
        }
        this.setData({ page: this.data.page + 1 })
        this.requestVideos(this.data.activeIndex)
},

需要判断是否最后一页，不再响应加载，我这里直接return出函数了，requestVideos 是向服务器访问数据的自定义函数

你也可以在页面的.json文件中定义距离底部多少距离，响应上拉事件，我试了，感觉差别不大，没太多影响

请求

 requestVideos(index){
        // 发起请求
        wx.showLoading({
            title: '加载中',
        })
        var app = getApp()
        wx.request({
            url: app.globalData.request_domain + '/index/index/videos',
            data: { type: index, page: this.data.page },
            method: "POST",
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            success: (res) => {
                if (res.statusCode != 200 || res.data.code != 200) {
                    app.showError()
                } else {
                    wx.hideLoading()
                    var newData = {}
                    if (res.data.data.length < this.data.pageSize) {
                        // 没有数据了，已经是最后一页
                        newData.isLastPage = true
                        newData.tips = "已显示全部啦"
                    }
                    // 追加数据
                    newData.videos = this.data.videos.concat(res.data.data)
                    this.setData(newData)
                }
            },
            fail: () => {
                app.showError()
            }
        })
    }

• Array.concat(Array) 将参数数组添加到调用数组中，形成新的数组
• newData 是为了去保存可能存在需要刷新的分页数据
• 通过 pageSize 判断是否最后一页
• showError() 是定义在 app 中的全局函数，就是显示几秒的错误提示

// 显示网络异常
showError: function () {
    wx.showToast({
        title: "网络异常",
        icon: 'loading'
    })
}

顺便提一点是微信小程序是有 icon 为 success 和 loading 的延时显示提示，没有错误的，你可以自定义图片路径在参数 image 中，来显示指定图标的提示

上面的函数你甚至可以定义传参来自定义提示内容

完整代码

以下是我小程序中所有 js 代码，因为我是有几个类型的视频，可以选择然后刷新，注意在页面有任何刷新的时候，都需要考虑分页数据的重置，当需要重置的次数很多，你当然需要把它放在一个函数中去调用

Page({
    data: {
        domain: getApp().globalData.resource_domain,
        activeIndex: 1,
        videos: [],
        page: 1,
        pageSize: 8,
        isLastPage: false,
        tips: '上拉加载更多'
    },

    onLoad: function() {
        this.requestVideos(1)
    },

    // 上拉加载更多
    onReachBottom: function () {
        // 最后一页了，取消下拉功能
        if (this.data.isLastPage) {
            return
        }
        this.setData({ page: this.data.page + 1 })
        this.requestVideos(this.data.activeIndex)
    },

    // 选择menu
    selector: function(e) {
        var index = e.currentTarget.dataset.index
        // 改变当前类，并重置分页数据
        this.setData({
            activeIndex: index,
            page: 1,
            isLastPage: false,
            tips: '上拉加载更多',
            videos: []
        })
        this.requestVideos(index)
    },

    /**
     * 请求视频集 1：一杆进洞 2：练习场 3：所有
     */
    requestVideos(index){
        // 发起请求
        wx.showLoading({
            title: '加载中',
        })
        var app = getApp()
        wx.request({
            url: app.globalData.request_domain + '/index/index/videos',
            data: { type: index, page: this.data.page },
            method: "POST",
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            success: (res) => {
                if (res.statusCode != 200 || res.data.code != 200) {
                    app.showError()
                } else {
                    wx.hideLoading()
                    var newData = {}
                    if (res.data.data.length < this.data.pageSize) {
                        // 没有数据了，已经是最后一页
                        newData.isLastPage = true
                        newData.tips = "已显示全部啦"
                    }
                    // 追加数据
                    newData.videos = this.data.videos.concat(res.data.data)
                    this.setData(newData)
                }
            },
            fail: () => {
                app.showError()
            }
        })
    }
})

POST 请求需要修改 header，系统默认是 json