公告列表
公告列表
收藏
回答

canvas 触摸事件导致页面整体滑动的问题？

华为手机鸿蒙系统，安卓10 微信8.0.23

canvas绘图区域，bindtouchstart事件会导致整个页面滑动（页面高度超过可显示区域），且不会打印log。

已经设置了属性disable-scroll="{{true}}" bindtouchstart="start" bindtouchmove="move" bindtouchend="end"

现象发生在安卓手机上，IOS不会出现

代码片段如下：https://developers.weixin.qq.com/s/1G9mAmm77DAE

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

1 个回答

  • Cjiang
    Cjiang
    2022-06-29

    canavs要进行绘制出来，才会触发相关events，如何画canvas的问题

    可以参考下文档的案例：

    https://developers.weixin.qq.com/miniprogram/dev/framework/ability/canvas.html

    代码片段：https://developers.weixin.qq.com/s/LnwoRnmT7dAm

    2022-06-29
    有用
    回复 7
    • 积极向上的楠哥
      积极向上的楠哥
      2022-06-29
      您好，我的主要问题是，在安卓机上，disable-scroll="{{true}}" 这个属性并没有生效，也就是说，在页面高度大于可显示区域时，在canvas上滑动，会导致整个页面滑动，这一点在IOS上不会出现，在您的代码片段中，可以放开wxml的注释，用安卓机来测试一下。
      2022-06-29
      赞
      回复
    • Cjiang
      Cjiang
      2022-06-30回复积极向上的楠哥
      1、你出现的无法显示log 绘制canvas再使用就可以正常
      2、没有生效是因为没有阻止冒泡，把 bind->catch正常
      我已经测试了，可以正常，你自行测试
      2022-06-30
      赞
      回复
    • 积极向上的楠哥
      积极向上的楠哥
      2022-06-30回复Cjiang
      您好，关于第二点有两个疑问
      1. 文档里显示原生组件canvas有限制，原生组件的事件监听不能使用 bind:eventname 的写法，只支持 bindeventname。原生组件也不支持 catch 和 capture 的事件绑定方式。
      2. 如果 bind->catch ，在触发事件的参数内，没有x,y
      2022-06-30
      赞
      回复
    • Cjiang
      Cjiang
      2022-06-30回复积极向上的楠哥
      如果限制你就把外层的view去掉（看到你自己canvas外面还套了view吗？），使用bind,直接用canvas画你想要的就行，我说的第二点是解决你为什么触摸事件导致页面整体滑动的问题，至于后面的自己写。
      2022-06-30
      赞
      回复
    • 积极向上的楠哥
      积极向上的楠哥
      2022-06-30回复Cjiang
      您好，使用catch 确实可以解决页面滑动的问题，但这会使触发的move函数拿到的事件对象中 touches 缺失x,y的属性，这样就无法计算触摸点相对于canvas的坐标位置。
      我理解catch可以解决事件冒泡的问题，但不理解为什么会改变事件对象的属性。
      2022-06-30
      赞
      回复
    查看更多(2)
请 登录 后发表内容
相关问题
相关文档