vue 下拉刷新实现


【手动实现下拉刷新】可以用vue-pull-refash 插件代替
//下拉刷新
let scroll = this.$ref.scroll // 获取当前要拖拽的元素
let top = scroll.offsetTop
let distance = 0
scroll.addEventListener('touchStart',(e)=>{
// 滚动条在最顶端 并且当前盒子在顶端的时候 才继续走 防止下啦刷新和加载更多同时触发
  if(scroll.scrollTop !=0|| scroll.style.offsetTop==top) return;
  let start = e.touches[0].pageY //手指点击的开始
  let move = (e)=>{
    let current = e.touches[0].pageY
    distance = current-start //求拉动的距离 距离大于50就显示50 小于0就不显示
    if(distance>0){
      if(distance<=50){
        scroll.style.top=distance+top+'px'
      }else{
        distance=50;
        scroll.style.top=top+50+'px'
      }
    }else{
      scroll.removeEventListener('touchmove',move)
      scroll.removeEventListener('touchend',end)
    }
  }
  let end=(e)=>{
    clearInterval(this.timer1)
    this.timer1=setInterval(()=>{
    if(distance<=0){
      clearInterval(this.timer1)
      distance=0
      scroll.style.top=50+'px'
      alert('获取数据')
      scroll.removeEventListener('touchmove',move)
      scroll.removeEventListener('touchend',end)
      this.offset=0
      this.books=[] //先清空数据
      this.getData() //获取数据
      return false
    }
    distance-=1
    scroll.style.top=top+distance+'px'
  },1)
  }
  scroll.removeEventListener('touchmove',move)
  scroll.removeEventListener('touchend',end)
},false)


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM