vue-scroll的上拉加载,下拉刷新
2022-04-19 本文已影响0人
兜兜里冒糖糖
1、安装
npm i vue-scroll -S
2、在main.js引入
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
3、在页面
<scroller class="sroll"
:on-refresh="refresh"
:on-infinite="infinite"
refresh-layer-color="#00BF5C"
loading-layer-color="#00BF5C"
refreshText="refresh"
ref="myScroller">
<ul>
<li></li>
</ul>
</scroller>
4、方法
refresh(){
//要刷新的数据请求
this.params.pageNum = 1
this.getList()
//关闭loading
this.timeout = setTimeout(()=>{
this.$refs.myScroller.finishPullToRefresh()
}, 2000)
},
infinite(done){
if(!this.isFinished){
setTimeout(()=>{
this.params.pageNum ++
this.getList()
console.log('加载')
done()//进行下一次加载操作
},1500)
}else{
this.$refs.myScroller.finishInfinite(true)
}
}