【场景】
假设你正在开发一款社交软件，用户可以浏览其他用户发布的动态信息。当用户下滑页面查看信息时，如果所有信息都被加载出来了，那么用户无法继续获取新的动态信息。因此，我们需要在这种情况下使用“上拉加载更多”的功能。具体而言，当用户下拉到页面底部时，会自动触发上拉加载更多的操作，在请求新的数据后更新页面内容。
【需求描述】
- 用户可以打开动态列表页面，并向下滑动页面以浏览已发布的动态信息。
- 当所有动态信息被加载完毕后，用户将不能继续获取新的动态信息。
- 为了允许用户获取更多的信息，我们需要在该页面添加“上拉加载更多”的功能。
- 当用户下拉到页面底部时，会自动触发上拉加载更多的操作，从服务器端请求新的动态信息。
- 如果服务器有新的数据，则将其逐步添加到页面底部，否则显示“没有更多了”的提示信息。
- 在数据请求过程中，可以通过展示“正在加载”的动画，来告诉用户数据正在加载中，避免让用户认为页面出现了问题。
【单页面实现】
要实现上拉加载请求分页接口下一页，你需要按照以下步骤进行操作：
- 在页面的
data中定义一个变量来存储当前页数（比如命名为pageNum），并初始化为 1。 - 在页面
onReachBottom方法中触发请求下一页数据的操作。 - 在请求下一页数据的方法中，将当前页数作为参数传递给后端接口，并根据接口返回的数据更新页面的数据列表。
- 在接口返回成功时，将当前页数加 1。
以下是示例代码：
<template><view><!-- 省略其他内容 --><view v-for="item in dataList" :key="item.id">{{ item.title }}</view></view>
</template><script>export default {data () {return {dataList: [], // 存储数据列表pageNum: 1, // 当前页数}},onReachBottom () {this.requestNextPageData()},methods: {async requestNextPageData () {const res = await uni.request({url: 'your-api-url',data: {pageNum: this.pageNum,},})if (res.statusCode === 200) {const nextDataList = res.data // 假设接口返回数据格式为 { data: [...] }if (nextDataList.length > 0) {this.dataList = this.dataList.concat(nextDataList)this.pageNum++} else {uni.showToast({title: '没有更多了',icon: 'none',})}} else {uni.showToast({title: '请求失败，请重试',icon: 'none',})}},},}
</script>
在上面的示例代码中，假设你的后端接口需要传递一个名为 pageNum 的参数来指定当前页数。当用户滚动到页面底部时，会触发 onReachBottom 方法，并调用 requestNextPageData 来请求下一页数据。在请求成功后会将新数据添加到 dataList 中，并增加 pageNum 的值以供下次请求使用。
【单模块实现】
如果需要在某个 view 中实现上拉加载更多的功能，可以使用 uni-loadmore 组件。具体步骤如下：
- 在需要添加上拉加载更多功能的
view中，添加一个带有ref属性的子标签，比如<view ref="loadMoreView"></view>。 - 在
view的scroll-view标签中，添加bindscrolltolower事件，用于监听滚动到底部的操作，并触发自定义方法（比如命名为handleLoadMore）。 - 在
handleLoadMore方法中，通过this.$refs.loadMoreView.$el获取到当前view的 DOM 元素，并调用$emit方法触发uni-loadmore组件的loading事件。 - 在
loading事件中，调用你的接口获取下一页数据，并更新数据列表。
以下是示例代码：
<template><view><!-- 省略其他内容 --><scroll-view bindscrolltolower="handleLoadMore" style="height: 100%;"><view v-for="item in dataList" :key="item.id">{{ item.title }}</view><view ref="loadMoreView"></view></scroll-view><uni-loadmore :show="isShowLoadMore" :styles="styles" @loading="onLoadMore"></uni-loadmore></view>
</template><script>export default {data () {return {dataList: [], // 存储数据列表pageNum: 1, // 当前页数isShowLoadMore: false, // 是否显示上拉加载更多组件styles: { // 自定义组件样式background: '#f4f4f4',color: '#888',},}},methods: {handleLoadMore () {const loadMoreView = this.$refs.loadMoreView.$elthis.$emit('loading', loadMoreView)},async onLoadMore () {this.isShowLoadMore = trueconst res = await uni.request({url: 'your-api-url',data: {pageNum: this.pageNum,},})if (res.statusCode === 200) {const nextDataList = res.data // 假设接口返回数据格式为 { data: [...] }if (nextDataList.length > 0) {this.dataList = this.dataList.concat(nextDataList)this.pageNum++} else {uni.showToast({title: '没有更多了',icon: 'none',})}} else {uni.showToast({title: '请求失败，请重试',icon: 'none',})}this.isShowLoadMore = false},},}
</script>
在上面的示例代码中，我们在 scroll-view 标签上添加了 bindscrolltolower 事件，并绑定了 handleLoadMore 方法。在该方法中，我们通过 this.$refs.loadMoreView.$el 获取到当前 view 的 DOM 元素，并触发 $emit 方法来触发 uni-loadmore 组件的 loading 事件。
在 onLoadMore 方法中，我们先将 isShowLoadMore 设置为 true，以显示上拉加载更多组件。然后调用你的接口获取下一页数据，更新数据列表。请求结束后将 isShowLoadMore 设置为 false，隐藏上拉加载更多组件。
希望这个回答能够帮到你！
