【场景】

假设你正在开发一款社交软件，用户可以浏览其他用户发布的动态信息。当用户下滑页面查看信息时，如果所有信息都被加载出来了，那么用户无法继续获取新的动态信息。因此，我们需要在这种情况下使用“上拉加载更多”的功能。具体而言，当用户下拉到页面底部时，会自动触发上拉加载更多的操作，在请求新的数据后更新页面内容。

【需求描述】

  • 用户可以打开动态列表页面，并向下滑动页面以浏览已发布的动态信息。
  • 当所有动态信息被加载完毕后，用户将不能继续获取新的动态信息。
  • 为了允许用户获取更多的信息，我们需要在该页面添加“上拉加载更多”的功能。
  • 当用户下拉到页面底部时，会自动触发上拉加载更多的操作，从服务器端请求新的动态信息。
  • 如果服务器有新的数据，则将其逐步添加到页面底部，否则显示“没有更多了”的提示信息。
  • 在数据请求过程中，可以通过展示“正在加载”的动画，来告诉用户数据正在加载中，避免让用户认为页面出现了问题。

【单页面实现】

要实现上拉加载请求分页接口下一页，你需要按照以下步骤进行操作：

  1. 在页面的 data 中定义一个变量来存储当前页数（比如命名为 pageNum），并初始化为 1。
  2. 在页面 onReachBottom 方法中触发请求下一页数据的操作。
  3. 在请求下一页数据的方法中，将当前页数作为参数传递给后端接口，并根据接口返回的数据更新页面的数据列表。
  4. 在接口返回成功时，将当前页数加 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 组件。具体步骤如下：

  1. 在需要添加上拉加载更多功能的 view 中，添加一个带有 ref 属性的子标签，比如 。
  2. 在 view 的 scroll-view 标签中，添加 bindscrolltolower 事件，用于监听滚动到底部的操作，并触发自定义方法（比如命名为 handleLoadMore）。
  3. 在 handleLoadMore 方法中，通过 this.$refs.loadMoreView.$el 获取到当前 view 的 DOM 元素，并调用 $emit 方法触发 uni-loadmore 组件的 loading 事件。
  4. 在 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，隐藏上拉加载更多组件。

希望这个回答能够帮到你！