收藏
回答

能否实现组件响应侧滑时禁止页面上下滑动的功能?

如题,我想在监听到用户向左/右滑动到阈值之后,阻止用户的滑动纵向滚动页面

(听起来好绕,换个说法,左右滑的时候不管上下滑,上下滑的时候不管左右滑)

类似于小程序的 swiper 组件,当你左右滑动的时候,无论你的手指如何上下拖动,页面也不会有纵向滚动;当你上下拖动页面的时候,无论手指如何左右拖动,swiper 也不会做出响应

以下是情况说明:

页面上现在有两种监听用户侧向滑动的组件,一种是一列数据中某一行可以左滑或者右滑调出按钮的模式(这个交互模式应该挺常见的)

还有一种是类似轮播图那样,左滑展示这个图片,右滑展示那个图片(截图就不放了,这个需求还有些特殊的样式、动画啥的要求,小程序的 swiper 实现不了所以自己搓了一个)

这两个需求目前都是用监听 touchmove 获知用户的手指滑动

现在遇到一个问题,人的手左右滑动的时候不可避免地会上下偏移;特别是手小的人单手操作的时候,大拇指左右滑动走的是个弧线...

我用的安卓机自测起来没啥问题,但是 BA(← 手小的人)用的苹果机的上下偏移阈值似乎特别小

她左滑/右滑调出侧边按钮的时候,由于手指的运动轨迹有上下偏移,页面也跟着上下滚动了😂

我按照开发移动端网页的经验,试了一下这么写 ↓ 大概就是判断用户为左右滑动的模式下,阻止默认行为

但我发现小程序好像没有什么 preventDefault 或者 stopPropagation ... 我试过用 catchtouchmove,但那样的话页面就不能上下滚动了

大佬们有没有什么解决方案?

回答关注问题邀请回答
收藏

1 个回答

  • 社区技术运营专员--阳光
    社区技术运营专员--阳光
    2023-12-18

    skyline 可以做,或者用 movable-view , wxs 响应事件等可以试试

    2023-12-18
    有用
    回复 2
    • 某只正在看书的
      某只正在看书的
      2023-12-22
      最后用 wxs 实现的非常感谢,不过 return false 来阻止默认行为这个功能希望可以在文档里写明,我是看了几遍文档之后在示例代码的注释里发现这个的
      2023-12-22
      回复
    • 强
      11-26回复某只正在看书的
      请教下解决方案,谢谢
      11-26
      回复
登录 后发表内容