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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序中当底部弹出框时，背景色置透明灰并覆盖echarts图表，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3603字，纯文字阅读大概需要6分钟。

内容图文

• 需求
  需要解决下方图中的问题，当底部弹出弹出框时，需要除弹出框外的元素置为透明灰色。下图是真机效果。
  此时，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">关闭</cover-view>
      </cover-view>
      <cover-view class="box">
        <cover-view class="{{item.checked ? 'all' : 'notAll'}} check" wx:for='{{ items }}' wx:key="index" data-index='{{index}}' catchtap='moreIndicators'>{{ item.name }}</cover-view>
      </cover-view>
      <cover-view class="tip"><cover-view class="">*</cover-view><cover-view>最多选择2项，最少选择1项</cover-view></cover-view>
    </cover-view>
  </cover-view>
  

  .element-wrapper {
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 10000;
  }
  .background {
    background-color: rgba(0, 0, 0, 0);
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
  }
  .bg {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 300vh;
    position: absolute;
    top: 0;
    transition-property: background-color;
    transition-timing-function: ease;
    transition-duration: 1s;
    transition-delay: 0;
    z-index: 999;
  }
  
  .element {
    position: absolute;
    width: 100%;
    height: 38vh;
    bottom: 0;
    background-color: #fff;
  }
  .picker_header {
    height: 70rpx;
  }
  .element .right-bt {
    font-size: 28rpx;
    color: #666;
    text-align: right;
    line-height: 66rpx;
    padding-right: 30rpx;
  }
  
  .element .line {
    display: block;
    position: fixed;
    height: 1px;
    width: 100%;
    margin-top: 89rpx;
    background-color: #eee;
  }
  .box {
    color: #333;
    font-size: 24rpx;
    font-family:PingFang SC;
    padding-top: 10rpx;
    text-align: left;
    padding-left: 14rpx;
    background-color:#fff;
    border-top: 1rpx solid #E1E1E1;
  }
  
  .check {
    float: left;
    width:225rpx;
    height:73rpx;
    line-height: 73rpx;
    background:#fff;
    border-radius:7rpx;
    margin: 8rpx !important;
    text-align: center;
    color: #E8380D;
    border: 1rpx solid #E8380D;
  }
  .all {
    color: #fff;
    background-color: #E8380D;
  }
  .notAll {
    color: #E8380D;
    background-color: #fff;
  }
  .tip {
    display: flex;
    font-size: 24rpx;
    color: #888888;
    padding-left: 16rpx;
    padding-top: 10rpx;
  }
  

  var action = '';
  var moveY = 200;
  var animation = animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 400,
      timingFunction: "ease",
      delay: 0
  })
  animation.translateY(moveY + 'vh').step()
  
  Page({
  	data: {
  		items: [],
  		show: false,
  	    backgroundVisible: false,
  	    animation: animation,
  	    bg: 'background',
  	},
  	animationEvents: function (that, moveY, action) {
      that.animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 400,
        timingFunction: "ease",
        delay: 0
      })
      that.animation.translateY(moveY + 'vh').step()
      if (action == 'show') {
        that.setData({
          animation: that.animation.export(),
          show: true,
          backgroundVisible: true,
          bg: 'bg',
          disableScroll: 'disableScroll'
        });
      } else if (action == 'hide') {
        that.setData({
          animation: that.animation.export(),
          show: false,
          backgroundVisible: false,
          bg: 'background',
          disableScroll: ''
        });
      }
    },
    showModel: function(e) {
      moveY = 0;
      action = 'show';
      this.animationEvents(this, moveY, action);
    },
    hidden(e) {
      moveY = 200;
      action = 'hide';
      this.animationEvents(this, moveY, action);
    },
    moreIndicators(e) {}
  })
  

内容总结

以上是互联网集市为您收集整理的微信小程序中当底部弹出框时，背景色置透明灰并覆盖echarts图表全部内容，希望文章能够帮你解决微信小程序中当底部弹出框时，背景色置透明灰并覆盖echarts图表所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---