美文网首页
vue-scroll的上拉加载,下拉刷新

vue-scroll的上拉加载,下拉刷新

作者: 兜兜里冒糖糖 | 来源:发表于2022-04-19 18:36 被阅读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)
  }
}

相关文章

网友评论

      本文标题:vue-scroll的上拉加载,下拉刷新

      本文链接:https://www.haomeiwen.com/subject/lefeertx.html