在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.修改代码
将模板转成你自己想要的效果。