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

2021-04-18 16:57:24 阅读：198 来源： 互联网

标签：中当框时 color 微信 height moveY animation background action

需求
需要解决下方图中的问题，当底部弹出弹出框时，需要除弹出框外的元素置为透明灰色。下图是真机效果。
此时，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) {}
})

标签：中当,框时,color,微信,height,moveY,animation,background,action
来源： https://blog.csdn.net/guairena/article/details/115834041

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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