更新记录

1.0.0（2020-08-10）

更新日志

1.0.0

支持上、下、左、右四个方向的监听

平台兼容性

一、使用说明

1. 解压下载的压缩包，将组件放在项目的components目录下

2. 引用组件 import wybSlideListener from '@/components/wyb-slide-listener/wyb-slide-listener.vue'

3. *.vue文件中使用

   <view>
       <wyb-slide-listener @slideUp="onSlide" @slideDown="onSlide" @slideLeft="onSlide" @slideRight="onSlide">
           <!-- 此处放你要监听的内容 -->
       </wyb-slide-listener>
   </view>
   <script>
       import wybSlideListener from '@/components/wyb-slide-listener/wyb-slide-listener.vue'
       export default {
           components: {
               wybSlideListener
           }
       }
   </script>

4. 监听事件

   methods: {
       onSlide: function(e) {
           let type = e.type
           console.log(e)
           switch(type) {
               case 'slideUp':
                   _this.tip('我上滑了~')
                   break
               case 'slideDown':
                   _this.tip('我下滑了~')
                   break
               case 'slideLeft':
                   _this.tip('我左滑了~')
                   break
               case 'slideRight':
                   _this.tip('我右滑了~')
                   break
           }
       }
   }

5. 返回值

   {
       "difference": {
           "differenceAbsX": 276, // X轴绝对坐标差
           "differenceAbsY": 5,   // Y轴绝对坐标差
           "differenceX": 276,    // X轴坐标差
           "differenceY": -5      // Y轴坐标差
       },
       "point": {
           "lastX": -19,  // 终止X坐标
           "lastY": 161,  // 终止Y坐标
           "startX": 257, // 起始X坐标
           "startY": 156  // 起始Y坐标
       },
       "type": "slideLeft", // 滑动类型
       "stayTime": 100      // 手指驻留时间
   }

6. Demo体验地址：点我访问（请用手机访问，或用桌面浏览器启动手机调试模式）

7. 如果觉得我的插件还不错，可以下载我的插件的示例集合Demo => 传送门，里面有我全部的插件以及全部插件的示例工程

二、参数说明

1. Props

   参数名	类型	默认值	用途
   vert-dif	Number	30	垂直滑动距离的判断阈值（垂直滑动多远触发事件）
   hori-dif	Number	30	水平滑动距离的判断阈值（水平滑动多远触发事件）
   vert-deg	Number	45	垂直滑动偏移的容差角度值（滑动时可以向左或向右偏移的角度）
   hori-deg	Number	45	水平滑动偏移的容差角度值（滑动时可以向上或向下偏移的角度）
   time-lim	Number	1000	允许手指在屏幕上驻留的时间 (ms)

2. Event

   事件名	返回值	用途
   @slideUp	详见上方示例代码	监听用户的上滑操作
   @slideDown	详见上方示例代码	监听用户的下滑操作
   @slideLeft	详见上方示例代码	监听用户的左滑操作
   @slideRight	详见上方示例代码	监听用户的右滑操作

三、实现原理

1. 通过判断在某一方向上的滑动距离、手指停留时间与滑动时偏离轴线的偏移角来判断是否发生了滑动手势
2. 默认的偏移角为45度，例如在向上滑动时可以向左或向右偏移45度，即监听范围为直线y=x和直线y=-x划分的四个区域
3. 组件实现原理比较简单，如果有需求可以自行在源码中改动，判断逻辑的注释比较详细