uniapp上拉加载更多

╰半夏微凉° 2023-01-11 09:11 176阅读 0赞

<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>

转发:[https://www.cnblogs.com/huihuihero/p/13206958.html][https_www.cnblogs.com_huihuihero_p_13206958.html]

[https_www.cnblogs.com_huihuihero_p_13206958.html]: https://www.cnblogs.com/huihuihero/p/13206958.html