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喲