微客导航 » 文章资讯 » 基于vue2实现上拉加载功能

基于vue2实现上拉加载功能

2023-09-20 09:16:09 344

本文实例为大家分享了vue2实现上拉加载展示的具体代码，供大家参考，具体内容如下

因为我们项目中，还用了swiper。很多都是滑动切换的，但是又得上拉加载，所以导致，很多UI框架，我们用了，都有不同的bug出现，没办法，最后写了一个。代码如下（这个因为很多地方会用，所以建议放在components/common下面）：

然后哪个页面需要，在哪个页面导入即可：importLoadMorefrom'./../common/loadmore.vue';在需要引入他的页面写法如下：

然后在此页面的data里和methods设置如下：

exportdefault{
name:'FinancialGroup',
props:{

},
data(){
return{
//上拉加载数据
scrollHeight:0,
scrollTop:0,
containerHeight:0,
loading:false,
allLoaded:false,
bottomText:'上拉加载更多...',
bottomStatus:'',
pageNo:1,
totalCount:'',
}
},
methods:{
/*下拉加载*/
_scroll:function(ev){
ev=ev||event;
this.scrollHeight=this.$refs.innerScroll.scrollHeight;
this.scrollTop=this.$refs.innerScroll.scrollTop;
this.containerHeight=this.$refs.innerScroll.offsetHeight;
},
loadBottom:function(){
this.loading=true;
this.pageNo+=1;//每次更迭加载的页数
if(this.pageNo==this.totalGetCount){
//当allLoaded=true时上拉加载停止
this.loading=false;
this.allLoaded=true;
}
api.commonApi(后台接口，请求参数)这个api是封装的axios有不懂的可以看vue2+vuex+axios那篇文章
.then(res=>{
setTimeout(()=>{
要使用的后台返回的数据写在setTimeout里面
this.$nextTick(()=>{
this.loading=false;
})
},1000)
});
},
handleBottomChange(status){
this.bottomStatus=status;
},
}

这样就完成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

基于vue2实现上拉加载功能

热门推荐

随机推荐