标签：uniapp isLoadMore res list 上拉 data page 加载

安装uni-load-more插件

<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,  //是否加载中
          };
    },

    onl oad() {
          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>

标签：uniapp,isLoadMore,res,list,上拉,data,page,加载
来源： https://www.cnblogs.com/5941web/p/15701860.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。