本篇主要是為了介紹和如何使用之前擼的三個vue在移動端常用的元件,現已開源，歡迎大家使用：
vue-floating
一個基於vue的浮窗元件,可在螢幕內自由拖拽，拖拽後的位置即可不變，也可在移動過程中手指釋放浮窗橫向貼邊。
Example
- 移動過程中手指釋放浮窗橫向貼邊:
- 拖拽後的位置不變
Demo
examples目錄裡面有demo用法，請自行下載檢視
Api
如果vue-floating覺得不錯的，記得給個star喲
vue-custom-scrollview
基於 better-scroll 的一個可自定義上下拉的移動端滾動列表元件，增強滑動體驗。 上下拉現預設動畫，如果你想做成自己想要的上下拉動畫，請檢視api
Example
Demo
examples目錄裡面有demo用法，請自行下載檢視
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(){
}
}
複製程式碼