uniapp 前端实现上拉加载更多

在uniapp中实现上拉加载更多可以使用uni-scroll-view组件，具体步骤如下：

1. 在template中添加uni-scroll-view组件，并设置scroll-y属性为true、scroll-with-animation属性为true、lower-threshold属性为50、bindscrolltolower属性为触发加载更多的回调函数名。

<template>
  <uni-scroll-view class="scroll-view" scroll-y="true" scroll-with-animation="true" lower-threshold="50" bindscrolltolower="loadMore">
    <view class="list">
      <!-- 数据列表 -->
    </view>
  </uni-scroll-view>
</template>

2. 在script中定义loadMore函数，用于触发加载更多的操作。在loadMore函数中可以向后端发送请求获取更多数据，然后将新数据添加到原有数据列表中。

<script>
export default {
  data() {
    return {
      dataList: [], // 原有数据列表
      page: 1, // 当前页数
      limit: 10 // 每页数量
    }
  },
  methods: {
    loadMore() {
      // 获取更多数据
      // 示例代码：向后端发送请求，获取第page+1页的数据
      const res = await this.$http.get('/api/data', {
        params: {
          page: this.page + 1,
          limit: this.limit
        }
      })
      const newDataList = res.data.list
      
      // 将新数据添加到原有数据列表中
      this.dataList = [...this.dataList, ...newDataList]
      
      // 更新页数
      this.page += 1
    }
  }
}
</script>

3. 在style中设置scroll-view的高度和list的样式。

<style>
.scroll-view {
  height: 100%;
}
.list {
  padding: 20rpx;
}
</style>

这样就可以实现uniapp中的上拉加载更多功能了。