canvas真机不能左右滚动
发布于 5 年前 作者 yang71 6118 次浏览 来自 问答

配置:

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

5 回复

还是存在这种问题啊,去掉overflow-x: scroll,工具和真机均不能滑动?

请问楼主是怎么解决的?

不,canvas 等原生组件被设定为是可以跟随页面一起滚动的。因为这个页面本身是客户端的 WebView。但是当 canvas 等原生组件处在 scroll-view 或者有 overflow 属性的 view 中时,用户左右上下滑动的就不再是页面而是 scroll-view / view ,此时 canvas 无法跟随着一起移动。

楼主  这个问题解决了吗?

去掉外层 view 的 overflow-x: scroll

已解决~

去掉外层 view 的 overflow-x: scroll

回到顶部