小程序地图组件和canvas组件在真机上会遮挡悬浮在最上层的元素
发布于 7 年前 作者 panwei 731 次浏览 来自 问答

地图组件全屏显示,屏幕右上角悬浮几个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%;
}

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

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

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

3 回复

我也遇到了  怎么解

小程序的bug???

Bug & Tip

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

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

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

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

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

回到顶部