zoukankan      html  css  js  c++  java
  • 鼠标滚轮更改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)

  • 相关阅读:
    Windows Console 程序中定时器的使用
    AT91SAM7SE应用 IRQ
    AT91SAM7SE应用 PIT 周期中断(1ms)
    AT91SAM7SE应用 UART
    Modelsim图像处理算法的仿真——图像数据操作
    按照一定的间隔,从视频中截图并保存(OpenCV)
    MacBook Pro下关闭全局网络代理
    jmeter的HTTP取样器设置重连的次数
    【C#】比较 Random 与 RandomNumberGenerator 生成随机字符串
    KendoGrid基础
  • 原文地址:https://www.cnblogs.com/cjh1111/p/7363836.html
Copyright © 2011-2022 走看看