cover-view在canvas上定位的bug
发布于 5 年前 作者 xiulan98 1388 次浏览 来自 问答

预期是想在canvas上做一个关闭的小叉,在右上角;

当我用第一种方式写的时候,所有ios出现了定位偏差的问题,安卓没有

一、wxml:

<view class=‘canvasCon’ style=“width:670rpx;height:850rpx” catchtap=‘closecanvas2’>

    <canvas canvas-id=“myCanvas” class=“canvas”>

        <cover-view bindtap=‘closecanvas’ class=“canvasView”>

            <cover-image class=“canvasImg” src=https://cms.hylpz.cn/data/images/common/close.png/>

        </cover-view>

    </canvas>

    <view class=“canvasButton” catchtap=‘canvasToTempFilePath’>保存图片</view>

</view>

wxss:

.page .canvasBox .canvasCon{

    top: 50%;

    left: 50%;

    margin-left: -335rpx;

    margin-top: -500rpx;

    position: relative;

    border-radius: 20rpx;

    z-index: 999;

    background: #fff;

}

.page .canvasBox .canvasCon .canvasView{

    display: block;

    width: 44rpx;

    height: 44rpx;

    position: absolute;

    top:20rpx;

    right: 20rpx;

    z-index: 1000;

}

安卓展示:

ios展示:

于是我想个办法解决这个问题,就是把 <cover-view>拿出来,不放在canvas标签里;

二、wxml:

<view class=‘canvasCon’ style=“width:670rpx;height:850rpx” catchtap=‘closecanvas2’>

    <canvas canvas-id=“myCanvas” class=“canvas”>

    </canvas>

    <view class=“canvasButton” catchtap=‘canvasToTempFilePath’>保存图片</view>

    

    <cover-view bindtap=‘closecanvas’ class=“canvasView”>

        <cover-image class=“canvasImg” src=https://cms.hylpz.cn/data/images/common/close.png/>

    </cover-view>

</view>

wxss不变

结果是一部分ios可以正常显示,而iP6s上cover-view没有canvas层级高,被压在下面导致不显示,

所以请问有什么办法解决?

7 回复

请问有什么解决办法

好的,谢谢!

图中哪一块是canvas?

用你的代码发现是乱的,能否提供一个完整的

第二种方法可以把cover-view稍微延迟一下再显示

官方是否已经复现了这个情况!

那个底色白色的部分是canvas

回到顶部