uniapp上拉加載更多功能的簡單實現

示例

前提：安裝了uniapp的LoadMore插件（一般初始都會安裝此插件）， https://ext.dcloud.net.cn/plugin?id=29

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

<script>
export default {
    data() {
          return {
                videoList:[],
				
                page:1,
                pagesize:10,
                loadStatus:'loading',  //加載樣式：more-加載前樣式，loading-加載中樣式，nomore-沒有數據樣式
                isLoadMore:false,  //是否加載中
          };
    },

    onLoad() {
          this.getVideoList()
    },
		
    onReachBottom(){  //上拉觸底函數
          if(!this.isLoadMore){  //此處判斷，上鎖，防止重復請求
                this.isLoadMore=true
                this.page+=1
                this.getVideoList()
          }
    },

    methods:{
          getVideoList(){
                uni.request({
                      url: `${this.$baseUrl}/api-video/getlist?page=${this.page}&pagesize=${this.pagesize}`,
                      method: 'GET',
                      success: res => {
                            if(res.data.code==200){
                                  if(res.data.data.list){
                                        this.videoList=this.videoList.concat(res.data.data.list)
                                        if(res.data.data.list.length<this.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.page>1){
                                        this.page-=1
                                  }
                            }
                      },
                      fail: () => {  //接口請求失敗的處理
                            uni.showToast({title: '服務器開小差了呢，請您稍后再試',icon:'none'})
                            this.isLoadMore=false
                            if(this.page>1){
                                  this.page-=1
                            }
                      },
                });
          },
    }
</script>