微信小程序中当底部弹出框时,背景色置透明灰并覆盖echarts图表

  • 需求
    需要解决下方图中的问题,当底部弹出弹出框时,需要除弹出框外的元素置为透明灰色。下图是真机效果。
    此时,echarts图表依旧高亮显示,需要去掉该高亮效果。
    在这里插入图片描述
    下图是微信开发者工具效果,开发者工具显示正常,真机echarts图表则会高亮。
    在这里插入图片描述

  • 问题所在
    通过微信小程序Echarts覆盖正常组件问题解决该文章知道:Echarts使用的是微信原生canvas,优先级高,z-index完全无效。cover-view 可以覆盖在原生组件之上。

  • 解决方式

    将写弹出层使用的 view 组件全部替换成 cover-view 组件

    <view class="chartsBox"></view>
    <view class="listBox">
    	<view bindtap="showModel">更多指标</view>
    </view>
    
    <cover-view class='{
          {bg}}' style="display:{
            {
            backgroundVisible ? 'block':'none'}}"></cover-view>
    <cover-view class="element-wrapper" animation="{
          {animation}}" style="display:{
            {
            show ? 'block':'none'}}">
      <cover-view class="element">
        <cover-view class='picker_header'>
          <cover-view class="right-bt" catchtap="hidden">关闭
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值