zoukankan      html  css  js  c++  java
  • 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)
  • 相关阅读:
    JAVA最简单常识
    BREW的资源文件概述及问题
    c语言 512
    c语言510 求矩阵的乘积
    c语言 511
    c语言57
    c语言 59
    c语言55 在应用对象式宏的数组中对数组元素进行倒序排列
    c语言 511
    c语言 510 求4行3列矩阵和3行4列矩阵的乘积。各构成元素的值从键盘输入。
  • 原文地址:https://www.cnblogs.com/supershare/p/12553886.html
Copyright © 2011-2022 走看看