微客导航 » 文章资讯 » vue2 mint-ui loadmore实现下拉刷新,上拉更多功能

vue2 mint-ui loadmore实现下拉刷新,上拉更多功能

2023-09-15 04:45:05 144

mintui是饿了么团队针对vue开发的移动端组件库，方便实现移动端的一些功能,这里主要给大家介绍vue2mint-uiloadmore实现下拉刷新,上拉更多功能，具体代码如下所示：




exportdefault{
data(){
return{
list:[],
allLoaded:false,
bottomStatus:'',
wrapperHeight:0,
topStatus:'',
//wrapperHeight:0,
translate:0,
moveTranslate:0
};
},
methods:{
handleBottomChange(status){
this.bottomStatus=status;
},
loadBottom(){
setTimeout(()=>{
letlastValue=this.list[this.list.length-1];
if(lastValue<40){
for(leti=1;i<=10;i++){
this.list.push(lastValue+i);
}
}else{
this.allLoaded=true;
}
this.$refs.loadmore.onBottomLoaded();
},1500);
},
handleTopChange(status){
this.moveTranslate=1;
this.topStatus=status;
},
translateChange(translate){
consttranslateNum=+translate;
this.translate=translateNum.toFixed(2);
this.moveTranslate=(1+translateNum/70).toFixed(2);
},
loadTop(){
setTimeout(()=>{
letfirstValue=this.list[0];
for(leti=1;i<=10;i++){
this.list.unshift(firstValue-i);
}
this.$refs.loadmore.onTopLoaded();
},1500);
},
},
created(){
for(leti=1;i<=20;i++){
this.list.push(i);
}
},
mounted(){
this.wrapperHeight=document.documentElement.clientHeight-this.$refs.wrapper.getBoundingClientRect().top;
}
};

总结

以上所述是小编给大家介绍的vue2mint-uiloadmore实现下拉刷新,上拉更多功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

vue2 mint-ui loadmore实现下拉刷新,上拉更多功能

热门推荐

随机推荐