微信小程序中当底部弹出框时,背景色置透明灰并覆盖echarts图表
2021/4/18 20:28:08
本文主要是介绍微信小程序中当底部弹出框时,背景色置透明灰并覆盖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">关闭</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图表的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-30实现小程序内部扫码签到和微信扫一扫签到-icode9专业技术文章分享
- 2024-06-30微信内调用扫码扫描小程序码如何解析链接-icode9专业技术文章分享
- 2024-06-30小程序码链接加密了如何解-icode9专业技术文章分享
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践