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

最新推荐文章于 2024-10-26 18:06:57 发布

weixin_42220130

最新推荐文章于 2024-10-26 18:06:57 发布

阅读量623

点赞数

文章标签： uni-app 插件 loadMore 上拉加载更多请求

原文链接：https://www.cnblogs.com/limonyun/p/16338558.html

版权

该文章介绍了如何在uniapp中使用LoadMore插件实现上拉加载更多的功能，包括数据列表渲染、上拉触底事件监听、加载状态管理以及接口请求的处理，确保在数据加载过程中避免重复请求。

摘要由CSDN通过智能技术生成

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>