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)
  }
}
上一篇 下一篇

猜你喜欢

热点阅读