小程序使用cover-view和cover-image（图片会被文字覆盖）

最新推荐文章于 2024-11-24 09:38:47 发布

原创最新推荐文章于 2024-11-24 09:38:47 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

46 篇文章

订阅专栏

探讨了在WXML中使用cover-view组件进行遮罩图片布局时遇到的层级覆盖bug，包括按钮和标题无法正确置于遮罩之上及真机调试时图片被文字覆盖的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过定位将遮罩的图片铺满video组件，但是产生了以下几个bug：

bug1：使用`z-index`将按钮和标题放在遮罩之上无效

bug2: 编辑器预览正常，但是真机调试后发现图片被`cover-view`内的标题文字压了下去

在网上大致一搜没有很好的解决方法，cover-view这个组件看来只能够用于一些简单实用的场景，在当前的需求下实现难度很大

 <cover-view class="roomSLeft" bindtap="collectHandle">
      <cover-view class="roomShareLogoV">
        <cover-image src="{{baseUrl+ 'index/'+(isCollect?'collection':'uncollection')+'.png'}} " class="roomShareLogo" />
        <!-- 线上图片不显示 -->
        <cover-image src="../../image/room/collect.png" class="roomShareLogo" />
      </cover-view>
      <cover-view class="roomLogo" style="color:{{isCollect?'#D81E06':'#808080'}};">收藏</cover-view>
    </cover-view>

线上图片会被文字覆盖（ios真机）