配置:
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true
},
"compileType": "weapp",
"libVersion": "1.6.0",
安卓、苹果都不能左右滚动。
wxml:
js:
Page({
onShow: function () {
const draw = canvasId => {
const ctx = wx.createCanvasContext(canvasId);
ctx.setFillStyle('red');
ctx.fillRect(0, 0, 80, 150);
ctx.draw();
ctx.setFillStyle('blue');
ctx.fillRect(20, 20, 40, 110);
ctx.draw();
};
new Array(10).fill('').forEach((x, index) => draw(`myCanvas${index}`));
}
});
原始状态:
左滑之后:
左右移动的时候, canvas的背景移动了, 但是canvas的内容并没有移动~ 大家知道是什么原因吗?
微信小程序开发者回答:
白***:
去掉外层 view 的 overflow-x: scroll
石***:系统记录
石***: 去掉外层 view 的 overflow-x: scroll已解决~
石***:
为什么上下滑动是可以的呢?这是一个bug吗? 会不会修复
白***:
不,canvas 等原生组件被设定为是可以跟随页面一起滚动的。因为这个页面本身是客户端的 WebView。但是当 canvas 等原生组件处在 scroll-view 或者有 overflow 属性的 view 中时,用户左右上下滑动的就不再是页面而是 scroll-view / view ,此时 canvas 无法跟随着一起移动。
石***:系统记录
本文网址:http://www.91bianli.com/weixinxiaochengxu/27433.html