【vue自定义指令touch-move】

前言

自定义指令,点击容器滚动到容器底部

一、Vue.directive自定义指令

自定义指令,给需要的的div绑定该指令,可以触发对应的事件.

二、使用步骤

1.全局注册

代码如下（示例）：main.js

Vue.directive('touch-move', {
  bind(el, binding) {
    let startY;
    el.addEventListener('mousemove', (event) => {
      if(event.buttons === 1) {
        startY = event.pageY;

        const fun = lodash.debounce(function(event) {
          const moveY = event.pageY;
          const distance = Math.floor((startY - moveY) / 2);
          binding.value(distance);
        }, 100);

        fun(event);
      }
    });
  },
});

2.在组件中使用

代码如下（示例）：

<vue-scroll ref="initEventMainScroll" @handle-scroll="onScroll" v-touch-move="onTouchMove"></vue-scroll>

// 滚动到容器最底部的方法,里面的参数可以忽略,根据自己的需求来写
onTouchMove(distance) {
  if(!distance) return;
  if(this.scrollTop === 0 && distance > 0) return;
  if(this.gameRealIndex !== this.gameList.length - 1) return;
  this.$refs.initEventMainScroll.scrollTo({y: this.scrollTop - distance , behavior: "smooth"}, 100);
},

总结

有问题请留言