配置:
“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的内容并没有移动~大家知道是什么原因吗?