收藏
回答

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)
登录 后发表内容