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)

  • 相关阅读:
    oracle 中有数据但是sql查询不出来结果(中文)
    linux mac 命令行 远程连接ssh提示IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY解决
    各地图坐标系知识及其转换方法
    Arcgis更新sde库许可
    运营商的三大数据域——B域,O域,M域
    SQL语句大全,所有的SQL都在这里
    苹果手机开启热点后,电脑搜索不到
    ArcgisServer在Linux系统上更新许可
    Linux 查询文件内容重复数 uniq、sort命令
    Atom 配置 Python
  • 原文地址:https://www.cnblogs.com/cjh1111/p/7363836.html
Copyright © 2011-2022 走看看