ant-design-mobile icon indicating copy to clipboard operation
ant-design-mobile copied to clipboard

picker组件在触摸屏笔记本电脑上的浏览器中无法拖动

Open WhiteCover opened this issue 3 years ago • 6 comments

Version of antd-mobile

5.11.2

Operating system and its version

Others

Browser and its version

chrome 100.0.4896.127

Sandbox to reproduce

No response

What happened?

picker组件在触摸屏笔记本电脑(华为某款自带触摸屏的笔记本电脑)上无法拖动,在pc浏览器浏览文档时,picker也不能拖动。用手在触摸屏上滑动去拖就可以。不带触摸屏的笔记本电脑可以用鼠标拖动,移动端的浏览器中使用也正常。

Relevant log output

No response

WhiteCover avatar May 05 '22 14:05 WhiteCover

用鼠标也不能拖动么?

awmleer avatar May 06 '22 01:05 awmleer

用鼠标也不能拖动么?

是的

WhiteCover avatar May 06 '22 13:05 WhiteCover

不科学啊,感觉是系统的原因,来个视频看看吧

awmleer avatar May 07 '22 01:05 awmleer

不科学啊,感觉是系统的原因,来个视频看看吧

目前就发现带触摸屏的华为笔记本电脑, surface有这个问题, 即使是官网文档里的示例也拖不了, 公司电脑暂时没法录视频, 差不多就是下图这个情况 image

WhiteCover avatar May 07 '22 07:05 WhiteCover

比较迷惑的一点就是如果用浏览器开发者工具的移动端选项, 就可以拖 image 只在pc端显示时无法拖动

WhiteCover avatar May 07 '22 07:05 WhiteCover

Chrome 开发者工具进入移动端模式之后,会触发 touch 事件,所以肯定是可以拖动的

初步推测,因为是触摸屏的电脑,所以 use-gesture 检测出来是有 touch 事件,就优先用 touch 事件了,没有 fallback 到 mouse 事件

awmleer avatar May 08 '22 09:05 awmleer

@WhiteCover 可以参考 vant 的解决办法 https://github.com/youzan/vant/tree/main/packages/vant-touch-emulator

引入这个js即可解决

seymoe avatar Mar 26 '23 01:03 seymoe