收藏
回答

canvas真机不能左右滚动

配置:

"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 个回答

  • Derek
    Derek
    2018-07-31

    楼主  这个问题解决了吗?


    2018-07-31
    有用
    回复
  • 晓刚Zzz
    晓刚Zzz
    2018-05-10

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


    请问楼主是怎么解决的?

    2018-05-10
    有用
    回复
  • 白开水
    白开水
    2017-10-26

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

    2017-10-26
    有用
    回复
  • 石海
    石海
    2017-10-21

    去掉外层 view 的 overflow-x: scroll

    已解决~

    2017-10-21
    有用
    回复
  • 白开水
    白开水
    2017-10-21

    去掉外层 view 的 overflow-x: scroll

    2017-10-21
    有用
    回复
登录 后发表内容