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

作者 : 超级管理员 本文共1300个字,预计阅读时间需要4分钟 发布时间: 2021-08-29 共109人阅读

前提:安装了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>
本站所发布的资源均来源于互联网,仅限用于研究学习,不得将软件用于商业或者非法用途,否则一切后果请用户自负!如果侵犯了您的权益请与我们联系!您必须在下载后的24个小时之内,从您的手机和电脑中彻底删除。 如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请与我们联系处理!
互利网 » UNIAPP上拉加载更多功能的简单实现

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了?
最常见的情况是下载不完整:可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

发表评论