内蒙古十一选五开奖走势图:any-touch一個手勢庫, 支持PC / 手機端 (原創)

内蒙古十一选五的走势图百度乐彩网 www.cyiqh.com 所屬分類:UI,其他-懸停,獨立的部件

分享到微信朋友圈
X
any-touch一個手勢庫, 支持PC / 手機端 (原創) ie兼容12

更新時間:2019-12-01 23:27:42

any-touch

一個基于typescript實現的手勢庫.

  •  支持更多設備: PC端 / 移動端 / 微信小程序.

  •  支持手勢更全面: tap(點擊) / press(按) / pan(拖拽) / swipe(劃) / pinch(捏合) / rotate(旋轉) 6大類手勢.

  •  更簡單: 支持 vue指令.

  •  更放心: 代碼測試覆蓋率100%.

安裝

npm i -S any-touch

CDN

https://unpkg.com/any-touch/dist/any-touch.min.js
// vue指令插件
https://unpkg.com/any-touch/dist/any-touch.v-touch.min.js

快速開始

import AnyTouch from "any-touch";
const el = doucument.getElementById("box");
const at = new AnyTouch(el);
// 單擊
at.on("tap", ev => {
  // 阻止默認事件觸發, 比如click
  ev.preventDefault();
});

更多手勢

根據手勢的運動方向和狀態我們還支持panstart / panup / pinchin / pinchout / pressup等更多的手勢事件.

// 旋轉中觸發
at.on('roatemove', ev=>{});

支持微信小程序

由于微信小程序中沒有 dom 元素的概念, 所以我們需要通過catchEvent方法手動接收 touch 事件的事件對象來進行識別!

<view @touchstart="touchstartHandler" @touchmove="touchmoveHandler" @touchend="touchendHandler"></view>
const at = new AnyTouch()
{ 
    onload(){
        at.on('pinch', ev=>{
            // 縮放
        });
    },
    
    methods: {
      touchstartHandler(ev){
        at.catchEvent(ev);
      },
      touchmoveHandler(ev){
        at.catchEvent(ev);
      },
      touchendHandler(ev){
        at.catchEvent(ev);
      }
    }
}

支持vue指令

import vTouch from 'any-touch/dist/v-touch.common'
Vue.use(vTouch);
<!-- xxx.vue -->
<div
  v-touch
  @tap="tap"
  @doubletap="doubletap"
  @press="press"
  @pan="pan"
  @pinch="pinch"
  @rotate="rotate"
  @click="click"
>hello v-touch</div>

此時div上可以通過v-on進行手勢的綁定,和綁定 click 等原生事件一樣.

 v-touch 高級設置

我們可以通過v-touch導入AnyTouch的實例, 然后進行高級設置.

<!-- xxx.vue -->
<div v-touch="importAT" @tap="tap">touch</div>
export default {
  methods: {
    importAT(at) {
      const doubletap = at.get("doubletap");
      // 開啟雙擊
      doubletap.disabled = false;
    }
  }
};

參數說明

名稱類型默認值簡要說明
touchActionString'compute'對應css的touch-action屬性
hasDomEventsBooleantrue是否派發手勢名對應的原生事件
isPreventDefaultBooleantrue是否阻止默認事件
preventDefaultExcludeRegExp | ((ev: SupportEvent) => boolean)/^(INPUT|TEXTAREA|BUTTON|SELECT)$/符合條件可不阻止默認事件的觸發
syncToAttrBooleantrue是否在元素上的at-gesture屬性賦值當前手勢名
cssPreventObject{selectText: true,drag: true, tapHighlight: true, callout: true}是否開啟上述禁止瀏覽器默認事件的css屬性

不要用alert調試

在安卓手機的真機上, 如果touchstart或touchmove階段觸發了alert, 會出現后續的touchmove/touchend不觸發的 bug. 所以請大家務必避免在手勢的事件回調中使用alert. 

如果僅僅是了在移動端調試, 請使用騰訊的vconsole

常見問題

為什么"雙擊"默認是關閉的?

因為"雙擊"的識別需要讓"單擊"等待他的"第二下單擊", 如果沒有"第二下單擊", 那么"單擊"觸發, 否則識別為"雙擊".

基于上面的邏輯, 如果默認開啟了"雙擊", 那么沒有"雙擊"需求的人用的時候就會覺得"單擊"反應慢(因為再等雙擊), 出于對"大多數人沒有雙擊需求"的考慮, 默認"雙擊"是關閉狀態.

開啟方式:

const at = new AnyTouch(el);
const doubletap = at.get("doubletap");
// 開啟雙擊
doubletap.disabled = false;
相關插件-懸停,獨立的部件

懸停顯示圖片

超炫酷鼠標懸停顯示圖片
  懸停
 12604  179

12種CSS3 hover效果插件

非常好看實用的CSS3的hover效果, 用transition 、amination 制造好看及實用的交互體驗
  懸停
 39539  299

css3鼠標滑過特效

9款css3鼠標劃過圖片散開特效代碼
  懸停
 22358  289

jQuery圖片邊框線條動畫效果

本案例的主要效果是鼠標懸停在圖片上,從其中的兩個角分別延伸出兩條線 類似兩條河流交匯的效果
  懸停
 25335  244

討論這個項目(1)回答他人問題或分享插件使用方法獎勵jQ幣 評論用戶自律公約

    天道酬勤 0
    2019/12/2 14:58:49
取消回復