• 鼠标滚轮更改transform的值(vue-scroller在PC端的上下滑动)


      目前上拉刷新,下拉加载,以及区域回弹的组件,绝大多数都是通过transform去实现的。在移动端效果很好,但是PC端使用鼠标拖拽的方式,查看下文首先不符合逻辑,其次容易点进其他页面

      起初,项目的初衷是在微信浏览器中查看,但是客户反应有些页面pc端没办法上下滑动(使用了vue-scroller的页面都跪了)。鼠标滚轮默认控制的是滚动条,不是容器的transform属性,怎么可能上下滑动。

      然后就想如果能监听到鼠标滚轮事件,然后再更改transform:translate3d(x,y,z),这样不就可以实现pc端vue-scroller的滚动了吗;度娘了一下,还真有鼠标滚轮事件,叫做mousewheel,这货可是原生JS的事件,jquery-free的同学,可以大胆使用。不过比较坑的是这个事件比较冷门,一般没人用,所以官方文档也不详细。

    window.onmousewheel = function (e) {
      if(e.wheelDelta<0){
          
      }else{
          
      }
    }

      这个事件包含了一个鼠标事件所没有的属性,wheelDelta,这个属性值始终是120的倍数,而且向上滑动一单位,wheelDelta值为120的倍数,向下为-120的倍数。

    下文是vue-scroller在pc端的处理

    let _this = this;//此this指向的是vue
    window.onmousewheel = function (e) {
      if(e.wheelDelta<0){
        _this.$refs.scrollerBottom && (_this.$refs.scrollerBottom.scrollBy(0, 30, false));//避免ref中不存在scrollerBottom
      }else{
        _this.$refs.scrollerBottom && (_this.$refs.scrollerBottom.scrollBy(0, -30, false));
      }
    }

      vue-scroller中scrollBy和scrollTo的区别就不细讲了,scrollTo就是把View移动到屏幕的X和Y位置,也就是绝对位置。而scrollBy则是相对位置。
      很简单的就实现了vue-scroller在pc端的上下滑动。(通过触摸板滚动,其实也是调用onmousewheel)

  • 相关阅读:
    poj 2674 Linear world
    poj 3185 The Water Bowls
    The Largest Clique (uva11324)
    Proving Equivalences (LA 4287)
    强联通分量( HihoCoder 1185 )
    求点双联通分量(HihoCoder
    求桥,割点(HihoCoder
    欧拉回路
    uva10054
    表达式树(公共表达式消除 uva 12219)
  • 原文地址:https://www.cnblogs.com/cjh1111/p/7363836.html
Copyright © 2020-2023  润新知