uniapp上拉加载更多
文章描述：
uniapp上拉加载更多数据例子
template
<template>
<view>
<view class="list">
<view class="item" v-for="(item,index) in List" :key="index">
{{index+1}}
</view>
</view>
<!-- loading加载提示处 -->
<view v-show="isLoadMore">
<uni-load-more :status="loadStatus" ></uni-load-more>
</view>
</view>
</template>script
var _self;
import uni_load_more from '../../components/uni-ui/uni-ui.vue';
export default{
components:{
uni_load_more
},
data(){
return{
List:[],
page:1,
pagesize:10,
loadStatus:'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
isLoadMore:false, //是否加载中
}
},
onLoad(){
_self = this
_self.List = [1,2,3,4,5,6,7,8,9,10]
},
onReachBottom(){ //上拉触底函数
console.log('触发')
if(!_self.isLoadMore){ //此处判断，上锁，防止重复请求
_self.isLoadMore=true
_self.page+=1
console.log(_self.page)
this.getList()
}
},
methods:{
getList(){
var data = [11,12,13,14,15,16,17,18,19,20]
_self.List=_self.List.concat(data)
// _self.List.push(...data)
// if(res.data.data.list.length<this.pagesize){ //判断接口返回数据量小于请求数据量，则表示此为最后一页
// this.isLoadMore=true
setTimeout(()=>{
// _self.loadStatus = 'nomore'
_self.isLoadMore = false
}, 5000);
// }else{
// this.isLoadMore=false
// }
}
}
}style
.list{
.item{
padding: 80upx;
background:#eee;
border-bottom: 1upx solid #fff;
}
}
发布时间：2022/12/14
发表评论