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)
以上是 vue 下拉刷新实现 的全部内容， 来源链接： utcz.com/z/380769.html
