收藏
回答

小程序地图组件和canvas组件在真机上会遮挡悬浮在最上层的元素

问题模块
API和组件

地图组件全屏显示,屏幕右上角悬浮几个button。在开发者工具中预览没有问题,但是在真机(iPhone6)上看不到button。

canvas上也有这样的问题。


canvas中画了一个图片和一段文字,canvas中的图片可以拖拽移动。页面最上层放了一个按钮,在开发者工具中预览时,按钮显示在图片上层,但是真机中图片显示在按钮上层,导致按钮被遮挡。当图片被移动后,才可以看到按钮,并且可以点击。


这是小程序的问题还是我的代码有问题?怎么解决呢?


wxml文件:

<view class="map-view">
    <canvas canvas-id="mymap" catchtouchstart="onTouchStart" catchtouchmove="onTouchMove" catchtouchend="onTouchEnd" catchtouchcancel="onTouchCancel" disable-scroll/>
    <button>hi</button>
</view>


wxss文件:

canvas{
    width: 100%;
    height: 100%;
    position: absolute;
}
button{
    position: absolute;
    z-index: 100;
    width: 100%;
}


开发者工具预览,如下图:


手机上看不到按钮了,如下图:



图片被移动后才可以看到按钮:





最后一次编辑于  2017-01-13
回答关注问题邀请回答
收藏

3 个回答

  • 阿如娜
    阿如娜
    2017-06-05

    Bug & Tip

    1. tipcanvas 组件是由客户端创建的原生组件,它的层级是最高的。

    2. tip: 请勿在 scroll-view 中使用 canvas 组件。

    3. tipcss 动画对 canvas 组件无效。


    以上是canvas的bug&tip,有几个由客户端创建的原生组件都有这几个问题,比如textarea、map等


    2017-06-05
    赞同
    回复
  • 到
    2017-06-03

    我也遇到了  怎么解

    小程序的bug???

    2017-06-03
    赞同
    回复
  • 徐小庶
    徐小庶
    2017-03-03

    我也遇到这个问题了,CANVAS会遮挡其他控件

    2017-03-03
    赞同
    回复