微信小程序实现上拉触底分页加载数据和下拉刷新数据

一、上拉触底

Page({
    /**
     * 页面的初始数据
     */
    data: {
        list: [],
        page: 1,
        pageSize: 10,
        total: 0,
        // 加载锁--开始请求数据设置为true，请求结束设置为false，触底事件判断为true则return
        isLoading: false
    },
    getList() {
        // 设置加载锁为true
        this.setData({
            isLoading: true
        })
        // 展示loading效果
        wx.showLoading({
            title: '数据加载中...',
        })
        wx.request({
            url: `https://www.escook.cn/categories/1/shops`,
            method: 'GET',
            data: {
                _page: this.data.page,
                _limit: this.data.pageSize
            },
            success: (res) => {
                this.setData({
                    list: [...this.data.list, ...res.data.list],
                    total: res.data.total
                })
            },
            complete: () => {
                // 关闭加载提示
                wx.hideLoading()
                // 关闭加载锁
                this.setData({
                    isLoading: false
                })
            }
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getList()
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        if (this.data.pageSize * this.data.page >= this.data.total) {
            wx.showToast({
                title: '暂无更多数据',
            })
            return
        }
        // 数据加载中--直接return
        if (this.data.isLoading) return
        this.setData({
            page: this.data.page + 1
        })
        this.getList()
    },
})

#二、下拉刷新

• .json文件中为此page页面开启下拉刷新功能

{
    "usingComponents": {},
    "navigationBarTitleText": "商品列表",
    "enablePullDownRefresh": true
}

• 页面相关事件处理函数–监听用户下拉动作

在调用getList方法的时候传入了一个箭头函数，执行wx.stopPullDownRefresh()用于关闭下拉刷新（默认不自动关闭）

/**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        // 需要重置关键的数据
        this.setData({
            page: 1,
            list: [],
            total: 0
        })
        // 从新请求数据，传入回调，关闭下拉刷新加载
        this.getList(() => {
            wx.stopPullDownRefresh()
        })
    },

• getList方法中处理回调函数cb && cb()

getList(cb) {
        this.setData({
            isLoading: true
        })
        // 展示loading效果
        wx.showLoading({
            title: '数据加载中...',
        })
        wx.request({
            url: `https://www.escook.cn/categories/1/shops`,
            method: 'GET',
            data: {
                _page: this.data.page,
                _limit: this.data.pageSize
            },
            success: (res) => {
                this.setData({
                    list: [...this.data.list, ...res.data.list],
                    total: res.data.total
                })
            },
            complete: () => {
                // 关闭加载提示
                wx.hideLoading()
                // 关闭节流锁
                this.setData({
                    isLoading: false
                })
                // 如果是下拉刷新，则执行回调函数关闭下拉刷新
                cb && cb()
            }
        })
    },

三、完整代码

// pages/pickFriend/pickFriend.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        list: [],
        page: 1,
        pageSize: 10,
        total: 0,
        // 加载锁--开始请求数据设置为true，请求结束设置为false，触底事件判断为true则return
        isLoading: false
    },
    getList(cb) {
        this.setData({
            isLoading: true
        })
        // 展示loading效果
        wx.showLoading({
            title: '数据加载中...',
        })
        wx.request({
            url: `https://www.escook.cn/categories/1/shops`,
            method: 'GET',
            data: {
                _page: this.data.page,
                _limit: this.data.pageSize
            },
            success: (res) => {
                this.setData({
                    list: [...this.data.list, ...res.data.list],
                    total: res.data.total
                })
            },
            complete: () => {
                // 关闭加载提示
                wx.hideLoading()
                // 关闭节流锁
                this.setData({
                    isLoading: false
                })
                // 如果是下拉刷新，则执行回调函数关闭下拉刷新
                cb && cb()
            }
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getList()
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        // 需要重置关键的数据
        this.setData({
            page: 1,
            list: [],
            total: 0
        })
        // 从新请求数据，传入回调，关闭下拉刷新加载
        this.getList(() => {
            wx.stopPullDownRefresh()
        })
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        if (this.data.pageSize * this.data.page >= this.data.total) {
            wx.showToast({
                title: '暂无更多数据',
                icon: 'none'
            })
            return
        }
        if (this.data.isLoading) return
        this.setData({
            page: this.data.page + 1
        })
        this.getList()
    },
})