微信小程序避坑指南——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> ...
- 微信小程序填坑之旅一(接入)
一.小程序简介 小程序是什么? 首先“程序”这两个字我们不陌生.看看你手机上的各个软件,那就是程序.平时的程序是直接跑在我们原生的操作系统上面的.小程序是间接跑在原生系统上的.因为它嵌入在微信中,受微 ...
随机推荐
- Linux 0.11源码阅读笔记-总览
Linux 0.11源码阅读笔记-总览 阅读源码的目的 加深对Linux操作系统的了解,了解Linux操作系统基本架构,熟悉进程管理.内存管理等主要模块知识. 通过阅读教复杂的代码,锻炼自己复杂项目代 ...
- 解决webpack项目中打包时候内存溢出的bug JavaScript heap out of memory
vue 项目 npm run dev 的时候一直卡住不动:后来找到报错是 Ineffective mark-compacts near heap limit Allocation failed - J ...
- caioj 1000到1030都是[水题]
caioj 1000到1030都是[水题],特此声明一下,可以不做就不要浪费时间做了
- LC-454
题目 给你四个整数数组 nums1.nums2.nums3 和 nums4 ,数组长度都是 n ,请你计算有多少个元组 (i, j, k, l) 能满足: 0 <= i, j, k, l < ...
- 使用 Jenkins 进行持续集成与发布流程图
应用构建和发布流程说明: 用户向 Gitlab 提交代码,代码中必须包含 Dockerfile 将代码提交到远程仓库 用户在发布应用时需要填写 git 仓库地址和分支.服务类型.服务名称.资源数量.实 ...
- ssm整合-ssmbuild
目录 项目结构 导入相关的pom依赖 Maven资源过滤设置 建立基本结构和配置框架 Mybatis层编写 Spring层 Spring整合service层 SpringMVC层 Controller ...
- 怎么快速找出帝国CMS数据库配置文件路径及迁移网站后修改技巧!
首先,我们要了解一下帝国CMS整个目录结构,只有了解清楚结构,我们才有可能快速找到自己想要的文件,比如:帝国CMS数据库配置文件路径! 帝国CMS目录结构介绍 / 系统根目录├d/ 附件和数据存放目录 ...
- Queue实现
1.Queue接口: public interface Queue<E> { int getSize(); boolean isEmpty(); void enqueue(E e); E ...
- FastDFS分布式的文件系统从小白入门到企业实践打怪之路系列笔记 【运维实践】
描述: FastDFS 是阿里的余庆大佬用 C 语言编写的一款开源的分布式文件系统(个人项目),它对文件进行管理.功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,适合中小文件(4KB ...
- JavaWeb学习day7-Response初学3(重定向)
重定向:web资源收到客户端请求后,通知客户端去访问另外一个web资源 1 protected void doGet(HttpServletRequest req, HttpServletRespon ...