收藏
回答

cover-view在canvas上定位的问题

API/组件名称 终端类型 微信版本 基础库版本
cover-view 客户端 最新 1.7.2

预期是想在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以及plus上cover-view没有canvas层级高,被压在下面导致不显示,其中白色部分是canvas!

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


回答关注问题邀请回答
收藏

5 个回答

  •  
     
    2018-04-09

    ios上目前应该都有bug,微信应该还在改

    2018-04-09
    有用
    回复
  • 阿白
    阿白
    2018-04-09

    在iphone 7p上滑动时,cover-view定位有问题,经常一下消失一下显示

    2018-04-09
    有用
    回复
  •  
     
    2018-04-09

    上面的第二种方法不就是把cover-view独立出来了么

    2018-04-09
    有用
    回复
  • 阿白
    阿白
    2018-04-09

    cover-view一定要包在canvas里面吗?能独立出来吗

    2018-04-09
    有用
    回复
  • 阿白
    阿白
    2018-04-09

    请问这个解决了吗

    2018-04-09
    有用
    回复
登录 后发表内容