vue-floating 浮窗组件、封装基于better-scroll的滑动组件、vue自定义手势指令

本篇主要是为了介绍和如何使用之前撸的三个vue在移动端常用的组件,现已开源，欢迎大家使用：

• vue-floating
• vue-custom-scrollview
• vue-finger-directive

vue-floating

一个基于vue的浮窗组件,可在屏幕内自由拖拽，拖拽后的位置即可不变，也可在移动过程中手指释放浮窗横向贴边。

Example

1. 移动过程中手指释放浮窗横向贴边:

2. 拖拽后的位置不变

Demo

examples目录里面有demo用法，请自行下载查看

Api

查看api文档

如果vue-floating觉得不错的，记得给个star哟

---

vue-custom-scrollview

基于 better-scroll 的一个可自定义上下拉的移动端滚动列表组件，增强滑动体验。 上下拉现默认动画，如果你想做成自己想要的上下拉动画，请查看api

Example

Demo

examples目录里面有demo用法，请自行下载查看

Api

查看api文档

目前只提供了以上常用方法、Api,如有额外需要请 issue

如果vue-custom-scrollview觉得不错的，记得给个star哟

---

vue-finger-directive

vue 自定义手势插件(点击、单击、长按、双击、拖拽移动、多点触控、滑动、缩放、旋转)，基于腾讯AlloyFinger改造后的vue版本

Example

1.点击事件

v-tap

2.单击事件，和tap的区别是相差250ms

v-singleTap

3.长按事件，当点击时长超过750ms时候触发

v-longTap

4.双击事件

v-doubleTap

5.拖拽移动事件

v-pressMove

6.多点触控事件开始事件

v-multipointStart

7.多点触控事件结束事件

v-multipointEnd

8.滑动事件

v-swipe

9.旋转事件

v-rotate

10.缩放事件

v-pinch

demo

如vue-floating 就是以vue-finger-directive为手势指令生成的浮窗组件

<div
  :style="floatStyle"
  class="floating"
  v-pressMove="{methods: pressMove, args: 'args' }"
  ref="floating"
  v-tap="{methods: tap }"
>
methods: {
  pressMove(e, args){

  },
  tap(){

  }
}

如果vue-finger-directive觉得不错的，记得给个star哟