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)