小程序实战(三)-分页加载

一、需求说明

默认只展示一页内容
用户可上滑加载下一页内容
当加载了两页及以上内容时，有返回顶部功能

二、需求实现

这个需求，主要使用小程序的 onReachBottom 函数。用户在上滑时，可以触发到这个函数，进行数据获取

2.1 获取数据函数实现

data: {
    list: [],
    page: 1,
    pageSum: '0'
},
getList() {
    api.getList({page: this.data.page}).then(res => {
        let list
        if (this.data.page == 1) {
            // 若请求第一页，则直接赋值
            list = res.list
        } else {
            // 否则将获取的数据与原数组合并
            list = this.data.list.concat(res.list)
        }
        this.setData({
            list: list
        })
    })
}

2.2 上滑动作触发函数实现

onReachBottom() {
    if (this.data. page + 1 <= this.data.pageSum) {
        // 若不是最后一页，则将当前页数增加1，获取数据
        this.setData({
            page: this.data.page + 1
        })
        this.getList()
    }
}

2.3 回到顶部函数实现

// 是否显示
data: {
    isShowToTop: false
},
onPageScroll(e) {
    this.setData({
        isShowToTop: e.scrollTop > 500
    })
}

toToP() {
    if (wx.pageScrollTo) {
        wx.pageScrollTo({
            scrollTop: 0
        })
        this.setData({
            isShowToTop: false
        })
    } else {
        wx.showModal({
            title: '提示',
            content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
        })
    }
}

<关于我们>

我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。

这里发布的文章是我们对学习内容的总结，预计会每周至少会更新一篇。

目前我们学习计划是： 小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入

另外，工作中用到的一些技术和完成的功能，我们也会及时总结更新在这里

如文章有错误或表述不清晰，欢迎各位留言反馈~~