uni-app 开发小程序,使用到u-charts.js时会出现弹框或下拉框部分与图标重叠的情况(还有在解决过程中出现 vasToTempFilePath: fail canvas is empty)

如下图,是我用uni-app开发小程序时出现视图与弹框或下拉框重叠的效果图,在微信开发工具上显示正常,但到了真机上就这样.

解决措施:
在小程序中canvas层级过高,导致z-index也无法让弹窗置于视图之上,根据官网提供的两种方法:
方案一是利用cover-view;
方案二是uni.canvasToTempfilepath()将视图转换为图片,显示隐藏;
针对我的项目来说,方案二可行.
我的代码如下:

<template><view><view class="content"><!-- @indexState="indexState"这个就是我接收下拉点击时传过来的方法和参数名 --><sl-filter :themeColor="themeColor" :menuList="menuList" @indexState="indexState" @result="result"></sl-filter></view><view class="qiun-columns"><view class="qiun-bg-white qiun-title-bar qiun-common-mt"><view class="qiun-title-dot-light">各线产能</view></view><!-- 我这里使用的是display: none还有block,大家可以根据实际情况自行定义--><view class="qiun-charts" :style="{display: imageDisplay}"><image :src="imgPath.replace(/[\r\n]/g, '')" :style="{ width: cWidth+ 'px', height: cHeight + 'px' }" /></view><view class="qiun-charts" :style="{display: canvasDisplay}"><canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas></view></view></view>
</template>

//在这里请记得this指向问题,我这里在created()方法中将this赋给了_self
//以下我只放主要代码块
var _self;
export default {data() {return {imgPath: '',//存放图片地址cWidth: '',//画布宽度cHeight: '',//画布高度imageDisplay: 'none',//图片的display属性 默认隐藏canvasDisplay: 'block',//画布的display属性 默认显示(因为我一进页面就要自动调用参数并显示图表)}},created() {_self = this;//给画布设定宽度高度this.cWidth = uni.upx2px(750);this.cHeight = uni.upx2px(500);},methods: {//...省略显示视图方法indexState(param){//这里是下拉 菜单组件  中发射给视图页面的参数// showMenuClick(index) {//触发事件//    this.selectedIndex = index;//  if (this.statusList[index].isActive == true) {//      this.$emit("indexState", 'colse');//收缩//        this.$refs.popupRef.close();//      this.statusList[index].isActive = false//  } else {//      this.$emit("indexState", 'open');//展开//         this.menuTabClick(index);//         this.$refs.popupRef.show()//    }// },//当下拉单点击就将canvas视图转换为图片,并将原本的canvas隐藏//原因: 因为canvas在小程序中层级过高,会导致与菜单下拉块重叠// 解决措施: this.canvasToImage() 将canvas视图转换为图片,// 并在不知不觉中替换原本的canvas以蒙混过关,骗过视觉效果,选择下拉参数后或再次点击菜单项后还原原本的canvasif(param == 'open'){//一定要注意,我这里演示的是进入页面就有视图的情况下,所以我点击下拉菜单就要做处理,根据实际情况来this.canvasToImage();//调用函数,将视图转换为图片this.imageDisplay = 'block';this.canvasDisplay = 'none';}else if(param == 'colse'){this.imageDisplay = 'none';this.canvasDisplay = 'block';}else{return;}},canvasToImage(){uni.canvasToTempFilePath({x: 0,//画布x轴起点（默认0）y: 0,//画布y轴起点（默认0）fileType: 'png',//目标文件的类型，只支持 ‘jpg’ 或 ‘png’。默认为 ‘png’width: _self.cWidth,//画布宽度（默认为canvas宽度-x）,这里我自己获取的canvas宽度height: _self.cHeight,//画布高度（默认为canvas高度-y）,这里我自己获取的canvas高度destWidth: _self.cWidth,//输出图片宽度（默认为width）,这里我自己获取的canvas宽度destHeight: _self.cHeight,//输出图片高度（默认为height）,这里我自己获取的canvas宽度canvasId: 'canvasLineA',//canvas的 canvas-id属性success: function(res) {//如果在这里使用this,那指向的就是这个函数,可以打印试一下// 在H5平台下，tempFilePath 为 base64// console.log(res.tempFilePath)_self.imgPath = res.tempFilePath},fail: function(res) {console.log(res);}}, _self);   //如果控制台报错: vasToTempFilePath: fail canvas is empty ,请记得在这里指向上下文,我这里是_self(因为我上面将this赋给了它)}}
}

经修改后的效果图:

我这里只处理了折线图的效果,下面柱状图是没处理的.
我这样写的可能还会存在问题,目前能解决我的个人需求,
以上仅供参考,个人笔记~

uni-app 开发小程序,使用到u-charts.js时会出现弹框或下拉框部分与图标重叠的情况(还有在解决过程中出现 vasToTempFilePath: fail canvas is empty)相关推荐

打车app开发小程序软件定制需要这6个流程
说起打车APP开发的兴起,不得不谈最近的滴滴事件,也让这个昔日打车霸主逐渐没落,令人唏嘘不已.随即而来的是各个打车app之间的无烟战场,希望能抢占滴滴所空出的市场份额.在我们的日常生活中,网约车似乎已 ...
求职兼职招聘类APP开发小程序开发的一些创新功能
企业的发展需要人才,求职者也是需要施展才华的平台,为实现两者之间更好的沟通交流需求,类似智能招聘APP软件这些平台就出现在现在移动互联网时代中.智能招聘APP开发可以更好地促进就业信息需求畅通,为就业 ...
uni App 支付宝小程序分享代码
封装获取当前页面的路由信息 export function getCurrentPath() {let currentRoutes = getCurrentPages(); // 获取当前打开过的页面 ...
小程序在父组件执行子组件方法，可适用于下拉刷新上拉加载之后执行子组件方法
当父组件引用了子组件的时候,会遇到父组件执行子组件的方法,比如下拉刷新上拉加载等事件只有在页面中才能检测到,但是获取数据的方法在子组件,这时就可以执行子组件方法. 思路很简单,类似于vue中给子组件加 ...
小程序在父组件执行子组件方法，可适用于下拉刷新上拉加载之后执行子组件方法...
当父组件引用了子组件的时候,会遇到父组件执行子组件的方法,比如下拉刷新上拉加载等事件只有在页面中才能检测到,但是获取数据的方法在子组件,这时就可以执行子组件方法. 思路很简单,类似于vue中给子组件加 ...
Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的，一键生成代码和API接口的，通用后台管理系统快速开发框架，开发小程序和APP的推荐框架！
Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的,一键生成代码和API接口的,通用后台管理系统快速开发框架,开发小程序和APP的推荐框架! 概述 R ...
微信小程序简单易用下拉框组件
由于公司项目需要,自己开发了一个微信小组件--Miche_mini_select下拉框本下拉框特点: 1.保证下拉框在最上层,不会被其他控件所遮挡 2.引用方便,直接引用组件即可,与页面耦合性低 3 ...
《Android Studio开发实战》学习（六）- 下拉框
<Android Studio开发实战>学习(六)- 下拉框背景下拉框Spinner的使用数组适配器ArrayAdapter的使用简单适配器SimpleAdapter的使用布局文 ...
java导出Excel增加下拉框选项，解决小数据量和大数据量下拉框选项的问题
文章目录 java导出Excel增加下拉框选项一.小数据量情况二.大数据量情况 java导出Excel增加下拉框选项(java结合easyExcel) 添加传参模型ConsumablesAddDT ...

uni-app 开发小程序,使用到u-charts.js时会出现弹框或下拉框部分与图标重叠的情况(还有在解决过程中出现 vasToTempFilePath: fail canvas is empty)

uni-app 开发小程序,使用到u-charts.js时会出现弹框或下拉框部分与图标重叠的情况(还有在解决过程中出现 vasToTempFilePath: fail canvas is empty)相关推荐

最新文章

热门文章