配置:
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true
},
"compileType": "weapp",
"libVersion": "1.6.0",
安卓、苹果都不能左右滚动。
wxml:
<view style="width: 100%;overflow-x: scroll;">
<view style="width: 1600rpx;">
<canvas canvas-id="myCanvas0" style="border: 1rpx solid #333;width: 160rpx;height: 300rpx;display: inline-block;"/>
<canvas canvas-id="myCanvas1" style="border: 1rpx solid #333;width: 160rpx;height: 300rpx;display: inline-block;background: red;"/>
<canvas canvas-id="myCanvas2" style="border: 1rpx solid #333;width: 160rpx;height: 300rpx;display: inline-block;"/>
<canvas canvas-id="myCanvas3" style="border: 1rpx solid #333;width: 160rpx;height: 300rpx;display: inline-block;"/>
<canvas canvas-id="myCanvas4" style="border: 1rpx solid #333;width: 160rpx;height: 300rpx;display: inline-block;"/>
<canvas canvas-id="myCanvas5" style="border: 1rpx solid #333;width: 160rpx;height: 300rpx;display: inline-block;"/>
<canvas canvas-id="myCanvas6" style="border: 1rpx solid #333;width: 160rpx;height: 300rpx;display: inline-block;"/>
<canvas canvas-id="myCanvas7" style="border: 1rpx solid #333;width: 160rpx;height: 300rpx;display: inline-block;"/>
<canvas canvas-id="myCanvas8" style="border: 1rpx solid #333;width: 160rpx;height: 300rpx;display: inline-block;"/>
<canvas canvas-id="myCanvas9" style="border: 1rpx solid #333;width: 160rpx;height: 300rpx;display: inline-block;"/>
</view>
</view>
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的内容并没有移动~ 大家知道是什么原因吗?
楼主 这个问题解决了吗?
还是存在这种问题啊,去掉overflow-x: scroll,工具和真机均不能滑动?
请问楼主是怎么解决的?
不,canvas 等原生组件被设定为是可以跟随页面一起滚动的。因为这个页面本身是客户端的 WebView。但是当 canvas 等原生组件处在 scroll-view 或者有 overflow 属性的 view 中时,用户左右上下滑动的就不再是页面而是 scroll-view / view ,此时 canvas 无法跟随着一起移动。
去掉外层 view 的 overflow-x: scroll
已解决~
去掉外层 view 的 overflow-x: scroll