uniapp上拉加载更多功能的简单实现

前提：安装了uniapp的LoadMore插件（一般初始都会安装此插件）

<template>
  <view class="container">
    <!-- 渲染的列表 -->
    <view v-for="(item, index) in List" :key="index">...</view>
    <!-- loading加载提示处 -->
    <view v-show="isLoadMore">
      <uni-load-more :status="loadStatus"></uni-load-more>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      List: [],
      query: {
    	pageNo: 1,
        pageSize: 30,
        query: {}
      },
      loadStatus: 'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      isLoadMore: false,  //是否加载中
    };
  },
  created () {
    this.loadMore()
  },
  //上拉触底函数
  onReachBottom () {
    //此处判断，上锁，防止重复请求
    if (!this.isLoadMore) {
      this.isLoadMore = true
      this.query.pageNo++
      uni.showLoading({
        title: '加载中...'
      })
      this.loadMore()
    }
  },
  methods: {
    loadMore () {
      // getList请求列表数据
      getList(this.query).then(({ res }) => {
        if (res.success) {
          if (res.data) {
            // this.List = this.List.concat(res.data)
            this.List = [...this.List, ...res.data]
            //判断接口返回数据量小于请求数据量，则表示此为最后一页
            if (res.data.length < this.query.pageSize) {
              this.isLoadMore = true;
              this.loadStatus = 'nomore';
            } else {
              this.isLoadMore = false;
            }
          } else {
            this.isLoadMore = true;
            this.loadStatus = 'nomore';
          }
        } else {
          //接口请求失败的处理
          uni.showToast({ title: res.data.msg, icon: 'none' })
          this.isLoadMore = false
          if (this.query.pageNo > 1) {
            this.query.pageNo -= 1
          }
        }
        uni.hideLoading()
      });
    },
  },
</script>