uni-app,微信小程序 ios 端,canvas绘制签名时拉出IOS橡皮筋回弹效果.

667 阅读1分钟

最终解决方案:在<canvas />标签上增加 disable-scroll="true";

  <canvas
        :canvas-id="cid"
        disable-scroll="true"
        @touchstart="onTouchStart"
        @touchmove="onTouchMove"
        @touchend="onTouchEnd"
      ></canvas>

解决途中的尝试和个人对失败原因的理解:

1.在page.json配置全局样式"bounce":"none"(ios回弹效果无),在app端有效;但在微信小程序端对普通<view/>有效,对<canvas/>无效.

image.png

2.在page.json配置全局样式"disableScroll": true(禁止页面滚动)

image.png

3.在根<view/>中设置@touchmove.stop.prevent="()=>{}"(禁止页面滚动)

image.png

2和3其实干的是相似的一件事:禁止页面滚动.都是在app端有效;但在微信小程序端对普通<view/>有效,对<canvas/>无效.

个人对原理的猜想:不管是【配置还是事件阻止】的禁止滚动都只用作用于uni-app的包装过的内置组件上,但对于这种小程序原生组件,它的层级和uni组件不同.所以并不受控.