【手動實現下拉刷新】可以用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)