微信小程序避坑指南——echarts层级太高/层级遮挡
问题:小程序中echarts因为小程序原生的canvas层级太高,而导致弹窗这类dom元素无法遮挡住canvas,如下图;
解决方案1:(wx:if控制dom显隐,显示canvas就重新渲染echarts,简单粗暴,但是耗费性能):
第一步:wxml
<!-- echarts饼图——用wx:if控制dom显隐,hidden没办法隐藏 -->
<ec-canvas id="storeChart" canvas-id="storeChart" ec="{{ pieChart }}" wx:if="{{!showDate}}"></ec-canvas> <!-- vant的日期选择控件——弹出日期控件就隐藏echarts,关闭日期控件就重新渲染echarts -->
<view class="calendar">
<van-calendar show="{{ showDate }}" color="#ff4366" type="range" bind:close="onClose" bind:confirm="onConfirm" min-date="{{ minDate }}"
max-date="{{ maxDate }}" allow-same-day/>
</view>
第二步:js
Page({ /**
* 页面的初始数据
*/
data: {
showDate: false, // 饼图、日期 显隐
//饼图
pieChart: {
lazyLoad: true // 延迟加载
},
pieData: {
data: [{
value: 10,
name: '杭州'
}, {
value: 20,
name: '广州'
}, {
value: 38,
name: '上海'
}]
},
}, // 显示日期
onDisplay() {
this.setData({
showDate: true,
});
},
// 关闭日期
onClose() {
this.setData({
showDate: false,
});
//dom节点出现需要时间,延迟一下重新渲染饼图
setTimeout(()=>{
this.pieEchartsComponnet = this.selectComponent('#storeChart'); //获取饼图dom
this.pieChart() // 饼图初始化
},0)
},
})
解决方案2:(hidden控制dom显隐,比较推荐,不会销毁dom重新渲染):
第一步:wxml
<view hidden="{{!echartsShow}}" style="height:500rpx;width:100%">
<ec-canvas id="chart" canvas-id="chart" ec="{{ chartsEc }}" force-use-old-canvas="true"></ec-canvas>
</view>
第二步:js(同方案1 )
微信小程序避坑指南——echarts层级太高/层级遮挡的更多相关文章
- 微信小程序避坑指南
如果对小程序还不熟悉,建议先看下另一篇小程序简介 1. 基础库和微信版本对应关系 iOS 客户端版本 基础库版本 6.7.2 2.3.0 6.7.0 2.2.5 6.6.7 2.1.3 6.6.6 2 ...
- 微信小程序避坑指南——input框里的图标在部分安卓机里无法点击的问题
问题场景: 下图中的显隐密码和验证码均为包裹在 input标签 中的 image标签, 但在开发测试中发现点击不了这俩个image标签,因为是被input标签的padding挡住了. 解决方法:将im ...
- 两百条微信小程序跳坑指南(不定时更新)
微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序爬坑日记
新公司上手小程序.30天,从入门到现在,还没放弃... 虽然小程序发布出来快一年了,爬坑的兄弟们大多把坑都踩平了.而我一直停留在"Hello World"的学习阶段.一来没项目,只 ...
- 微信小程序在ios下Echarts图表不能滑动的解决方案
问题现象 这个问题的现象说起来很简单. 小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容. 但是手指滑动区域在Echarts图表上时,页面却不能滑动了. 如下图: 追踪 ...
- 微信小程序的坑(持续更新中)
参与微信小程序开发有一段时间了,先后完成信息查询类和交易类的两个不同性质的小程序产品的开发:期间遇到各种各样的小程序开发的坑,有的是小程序基础功能不断改进完善而需要业务持续的适配,有的是小程序使用上的 ...
- 微信小程序采坑(一)
1.微信小程序如何让text内容空格 <text decode="{{true}}" space="{{true}}"> </text> ...
- 微信小程序填坑之旅一(接入)
一.小程序简介 小程序是什么? 首先“程序”这两个字我们不陌生.看看你手机上的各个软件,那就是程序.平时的程序是直接跑在我们原生的操作系统上面的.小程序是间接跑在原生系统上的.因为它嵌入在微信中,受微 ...
随机推荐
- 小程序开发之一(使用fly进行http封装)
原文地址:http://callmesoul.cn 下载fly js文件 fly小程序文档 /api/config.js 配置,主要配置全局的host url和request拦截和request拦截 ...
- java堆排序
直接贴源代码: package com.java.fmd; import java.util.Scanner; public class HeapSort { int[] arr; public st ...
- caioj 1000到1030都是[水题]
caioj 1000到1030都是[水题],特此声明一下,可以不做就不要浪费时间做了
- SpringCloudAlibaba注册中心与配置中心之利器Nacos实战与源码分析(上)
不断踩坑并解决问题是每个程序员进阶到资深的必要经历并以此获得满足感,而不断阅读开源项目源码和总结思想是每个架构师成长最佳途径.本篇拉开SpringCloud Alibaba最新版本实战和原理序幕,以工 ...
- 从实例学习 Go 语言、"基础与进阶" 学习笔记及心得体会、Go指南
第一轮学习 golang "基础与进阶"学习笔记,Go指南练习题目解析.使用学习资料 <Go-zh/tour tour>.记录我认为会比较容易忘记的知识点,进行补充,整 ...
- 小程序canvas 圆角框带填充颜色
// ctx: 获取canvas的id --- const ctx = wx.createCanvasContext('canvasId') // x 横坐标 y 纵左边 w 框的宽度 h 框的高 ...
- RecyclerView + SQLite 简易备忘录-----中(2)
(3)RecyclerView的实现 ---中间的内容 RecyclerView是一个比ListView更加强大的滚动控件.要使用这个控件需要先在项目的build.gradle中添加RecyclerV ...
- jmeter元件,作用域与优先级
jmeter元件,作用域与优先级 一.jmeter元件 1.配置元件:优先级最高 1.1 重点使用元件:csv数据文件设置.用户定义变量.计数器 2.取样器:根据不同协议来编写请求脚本的元件 2.1 ...
- XCTF练习题---CRYPTO---不仅仅是Morse
XCTF练习题---CRYPTO---不仅仅是Morse flag:cyberpeace{attackanddefenceworldisinteresting} 解题步骤: 1.观察题目,下载附件 2 ...
- Maven基础学习笔记
Maven基础学习笔记 下载链接 官网:https://maven.apache.org/ 所有版本:https://archive.apache.org/dist/maven/maven-3/ 阿里 ...