哈尔滨人, 写代码, 打篮球.
any86 / any-touch Goto Github PK
View Code? Open in Web Editor NEW:wave: Touch gesture library, 1kb~5kb, compatible with PC / mobile
Home Page: https://any86.github.io/any-touch
License: MIT License
:wave: Touch gesture library, 1kb~5kb, compatible with PC / mobile
Home Page: https://any86.github.io/any-touch
License: MIT License
使用 preventDefault: false 可以让移动端滚动,不过移动端 tap 需要长按(0.5s左右)才能触发,换成 click 正常,并且 pan 会触发滚动条的滚动。
如果去掉 preventDefault:false tap 正常,不过移动端没饭滚动,click 也无效,换成 tap 以后正常。
我想问一下有没有什么比较好的办法能够在不使用 preventDefault: false 的情况下让滚动条能够正常滚动。我现在是在 pan 事件里面修改 scrollTop,不过这样滚动没有加速度,很不流畅。
代码就差不多下面这个形式,左侧的滚动条在移动端下无法滚动(在不使用 preventDefault: false 的情况下)。
<script lang="ts" setup>
const el = document.getElementById('point-list')
const at = new AnyTouch(el)
onMounted(() => {
at.on('pan', (e) => {
})
at.on('panend', (e) => {
})
})
</script>
<div id="point-list" class="list">
<div class="item" v-for="(point, index) in pointList" :key="index" @tap="toggleSelection(index)">{{point.name}}</div>
</div>
比如我一下快速拖拽后松开重复这样的操作3次,下次拖拽10px的距离@pan事件就会一次触发3到4次了
你好 我使用了any-touch的tap并设置pointLength为2 即支持的触点数为2
实际情况是允许1~2指点击 想请教一下有什么方法可以使其只支持两指吗?
非常感谢
可以在canvas上使用吗,用的是pixi引擎
相对hammer的swipe,any-touch的swipe很难触发
作者您好,通过on监听后,事件有销毁机制吗?还是需要手动怎么销毁一下?
如题
添加了press事件的dom上手势无法滚动
在以vue指令方式使用doubletap的时候,发现没效果,然后用了下面代码才可以,问题是,不应该默认是true吗?
importAT (at) { const doubletap = at.get('doubletap') doubletap.disabled = false }
panend在桌面端可以正常触发,但是在h5中无法触发
请问支持react吗
First of all, thank you very much for contributing such a good thing.
However, when a library is used as a dependency in a production environment, compatibility issues are important. Have you considered adding relevant information to the documentation?
对应pan的三个状态,一个是长按开始,一个是短按开始
swipestart,swipemove,swipeend
最近做手势项目,头痛死了快,官方也放弃维护官方手势库。
微信小程序怎么安装 有没详细点的文档
Core.use(Tap,{name:'twoFingersTap',tapTimes:2,pointLength:2});
const at = new Core(targetDOM);
at.on('twoFingersTap', (ev) => {
console.log(ev)
// ev包含位置/速度/方向等信息
});
使用场景是画笔在画布上画画,画笔未激活时用户可以用单指移动画布,但是画笔激活时,单指移动就是画画了。此时双指移动才是移动画布。
afterEach中返回所有识别的手势事件,以及at:start/at:end等, 现在的at:after事件中并没有at:start/:at:end事件, 不方便做全部事件的拦截代理.
研究下是在any-event中增加还是在any-touch中增加
如题
import TouchCore from '@any-touch/core';
import Swipe from '@any-touch/swipe';
TouchCore.use(Swipe, { threshold: 10, velocity: 0.2 });
const el = document.querySelector('.wrap') as HTMLElement;
el &&
new TouchCore(el, { preventDefault: false }).on('swipe', e => {
console.log(e.direction);
checkSwiper(e.direction);
});
建议设置为false时彻底清除下 preventDefault
有没有只允许横向或竖向拖拽的属性配置;还有就是没有找到停止拖拽的函数或方法
<A>
<B></B>
</A>
拖动A时,B不会动,但是拖动B时,A会跟着动,如何在操作B时,不会将拖动事件穿透到A上?
你这里不用babel编译的吗?
假如用到promise,怎么polyfill
完成一次缩放后,以后使用一个手指都会被识别成两个触点。
at.on('panstart') 中返回的point并不是起始点,因为这时候distance已经是10了。 能不能返回startPoint
或者, 使用NPM
import AnyTouch from 'any-touch';
const el = doucument.getElementById('box');
const at = new AnyTouch(el);
at.on('pan', e => console.log('e包含位移/速度/方向等信息',e))
at.on('input' ,e=>{
e.type
})
pan 事件怎么区分 start move end 呢?文档没说明噢~
即係當在html入面有一個長頁面,假設像ios apps一樣左上角有個menu button,但scrolling滾動時按這個button它沒有觸動touch的反應,這個情況只是在iphone的瀏覽器web browser上面發生,例如iphone上的safari和chrome都是一樣發生這個問題
<script setup>
const tap= () => {
// 成功
console.log('tap')
}
const doubletap = () => {
// 失败
console.log('doubletap')
}
</script>
<template>
<div v-touch @tap="tap" @doubletap="doubletap">test</div>
</template>
因为插件默认阻止了原生事件,导致滚动条无法滚动,但是设置为true,就感觉很卡顿。跟原生事件冲突了。
要是有doubletap 双击事件就好了
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.