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)

  • 相关阅读:
    Magical系列软件产品项目启动了
    IT从业者的学习规划 学习者系列文章开篇
    软件项目角色指南开篇
    使用CSS定位页面的“footer”
    项目管理知识体系指南【3】项目生命期与组织
    读书感受 软件设计师 你必须知道的.NET (C#类型存储方式分析)
    软件外包及其项目管理分析
    项目管理知识体系指南【1】开篇
    项目管理知识体系指南【4】单个项目管理过程
    软件设计师之路【1】开篇
  • 原文地址:https://www.cnblogs.com/cjh1111/p/7363836.html
Copyright © 2011-2022 走看看