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)
  • 相关阅读:
    EF关联
    nopcommerce v3.9中文包
    Android Activity切换与Activity间数据交互
    C#多线程的用法9-Semaphore
    C#多线程的用法8-线程间的协作AutoResetEvent
    C#多线程的用法7-线程间的协作ManualResetEvent
    C#多线程的用法6-线程间的协作Mutex
    C#多线程的用法5-线程间的协作Monitor
    C#多线程的用法4-线程间的协作lock快捷方式
    C#多线程的用法3-线程间的协作Join
  • 原文地址:https://www.cnblogs.com/supershare/p/12553886.html
Copyright © 2011-2022 走看看