vue-scroller实现vue单页面的上拉加载和下拉刷新问题
程序员文章站
2022-06-29 12:42:39
在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件。 vue-scrolle的基本使用方法: 1.下载 2.导包 3.项目使用 4.修改代码 将模板转成你自己想要的效果。 ......
在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件。
vue-scrolle的基本使用方法:
1.下载
npm i vue-scroller -d
2.导包
import vue from 'vue'
import vuescroller from 'vue-scroller'
vue.use(vuescroller)
3.项目使用
<scroller :on-infinite="infinite"
:on-refresh="refresh"
ref="my_scroller">
<!-- 项目内容 -->
</scroller>
<script>
export default {
methods:{
infinite(done) { //上拉加载
if(this.nodata) {
settimeout(()=>{
this.$refs.my_scroller.finishinfinite(2);
})
return;
}
let self = this;
let i=1;
let start = this.list.length;
settimeout(() => {
for(var k=0;k<9;k++){
self.list.push(k)
}
i++;
if(start/i < 9) {
self.nodata = "没有更多数据"
}
self.$refs.my_scroller.resize();
done()
}, 1500)
},
refresh:function(){ //下拉刷新
console.log('refresh')
this.timeout = settimeout(()=>{
this.$refs.my_scroller.finishpulltorefresh()
}, 1500)
}
}
}
</script>
4.修改代码
将模板转成你自己想要的效果。