uni-app中实现列表滑动分页加载功能

1、代码实现，使用Scroll-View

<template>
  <view class="allheaders">

   //使用scroll-view包裹列表
    <scroll-view v-if="atentionList.length > 0" scroll-y="true" @scrolltolower="loadMore()" :style="{ height: scrollH + 'rpx' }">
      <view class="firstBox">
        <view class="boxInfo" v-for="(item, index) in atentionList" :key="index">
          <view class="topBox">
           //此处遍历列表每一项
            ......
          </view>
        </view>
        <view class="pagesStatus" @click="loadMore()">
          {{ pages == pageNumber ? '到底了~' : '加载更多' }}
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      pages: 1,
      pageNumber: 0,
      atentionList: [],
      //获取滚动距离
      scrollH: 0,
    }
  },
  onShow() {
    this.scrollH = this.scrollHs()
  },
  mounted() {
    this.attentionList()
  },
  methods: {
    // 获取开始滚动距离
    scrollHs() {
      let sys = uni.getSystemInfoSync()
      let winWidth = sys.windowWidth
      let winrate = 750 / winWidth
      let winHeight = parseInt(sys.windowHeight * winrate)
      return winHeight - 20
    },
    // 关注列表
    attentionList() {
      let that = this
      let data = {
        pageNo: that.pageNumber + 1,
        pageSize: 10,
      }
      requestMethod('/atention/v1/list', data).then((res) => {
        console.log('用户信息', res)
        if (res.code == 'SUCCESS' && res.data) {
          that.pages = res.data.atentionList.pages
          that.pageNumber = res.data.atentionList.pageNumber
          //分页加载
          this.atentionList = [...this.atentionList, ...res.data.atentionList.list]
        }
      })
    },
    // 加载更多
    loadMore() {
      if (this.pages > this.pageNumber) {
        this.attentionList()
      }
    },
  },
}
</script>

2、总结

主要是通过scroll-view包裹列表，然后通过uni.getSystemInfoSync()获取系统型号，进而获取页面滚动距离，当滚动到某一处位置时，开始加载下一页。