【微信小程序】解决canvas组件永远在最高层问题

详情参考微信小程序文档原生组件

1、为什么canvas组件总是会在最上层？

由于canvas组件是原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。

2、如何解决canvas层级最高问题？

方法一：用原生组件覆盖原生组件

为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件，可以覆盖在部分原生组件上面。这两个组件也是原生组件，但是使用限制与其他原生组件有所不同。
比如：cover-view只支持嵌套 cover-view、cover-image、button。

方法二：让canvas在图片和canvas间切换

因为cover-view只支持嵌套 cover-view、cover-image、button，对于canvas上显示弹窗中的input之类的需求就不太符合。

思路：在data里定义了一个canvasImg，然后在wxml中判断，是否这个值是否有效，若有效，canvas隐藏；否则，显示canvas。然后在页面渲染canvas时，执行了wx.canvasToTempfilepath方法，将雷达图转化为图片。此时给canvasImg赋值，canvas隐藏，image显示。下面是具体实现代码：

wxml:

<view class="canvas-content"><canvascanvas-id="myCanvas"wx:if="{{!canvasImg}}"style="width: 260px; height: 180px;"></canvas><image wx:else src="{{canvasImg}}" style="width: 260px; height: 180px;" />
</view>

js:

// 需要让 弹窗等 出现在canvas上的事件
handleCanvarToImg() {var that=this;wx.canvasToTempFilePath({x: 0,y: 0,width: 260,height: 180,canvasId: 'myCanvas',success: function(res) {that.setData({ canvasImg: res.tempFilePath});}});
},
// 最后弹窗等消失时，触发的事件中需将canvasImg初始化（=null）

【微信小程序】解决canvas组件永远在最高层问题相关推荐

微信小程序-解决canvas组件永远在最高层问题
由于canvas组件是原生组件,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 为了解决原生组件层级最高的限制.小程序专门提供了 cover-vi ...
微信小程序画布Canvas组件touchend事件不触发处理
一.摘要在微信小程序手势图案锁屏.解锁实现并提供onSuccess等回调一文中,用Canvas画布组件实现了类似Android和Iphone的图案锁屏.解锁功能,除去偶尔卡顿.滑动不连续外,其它都还 ...
微信小程序引入vant-weapp组件遇到的bug以及解决方法
微信小程序引入vant-weapp组件遇到的bug问题原本百度了一波,说只要安装了node还有npm之后,使用gitBash命令行工具直接cd到根目录下然后直接引入以下代码: npm i vant- ...
解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现
微信小程序使用canvas绘制倒计时圆圈和数字居中的实现 1.显示结果 2.过程: (1)wxml + css <view style="backg ...
微信小程序 F2 图表组件
@antv/f2-canvas 微信小程序 F2 图表组件安装 npm i @antv/f2-canvas 快速开始下面我们就开始使用 f2-canvas 组件来绘制图表吧,这里假设用户已经初步了 ...
html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
uni开发微信小程序解决全局分享分销问题
uni开发微信小程序解决全局分享分销问题 1. 需求 1.小程序内每个页面都要打开胶囊分享按钮并实现分销 2.分享功能应该是在用户登录之后才予以打开 3.不想做在每个页面都写分享钩子的傻逼操作 2.实 ...
微信小程序 — 长列表组件 recycle-view 详细教学
微信小程序 - 长列表组件 recycle-view 踩坑问题全解写在前面引入长列表组件 recycle-view 长列表组件 recycle-view 的使用问题一.如何增加下拉刷新功能? 问 ...
微信小程序日历签到组件(原创)
微信小程序日历签到组件(原创) 开发原因: 为满足定制需要,市面上又找不到车子和轮子,干脆自己撸了并开源分享有需要的人用其他说明: 该组件js日期均已使用yyyy/MM/dd格式连接解决ios不兼容 ...

【微信小程序】解决canvas组件永远在最高层问题

1、为什么canvas组件总是会在最上层？

2、如何解决canvas层级最高问题？

方法一：用原生组件覆盖原生组件

方法二：让canvas在图片和canvas间切换

【微信小程序】解决canvas组件永远在最高层问题相关推荐

最新文章

热门文章

【微信小程序】解决canvas组件永远在最高层问题

1、为什么canvas组件总是会在最上层？

2、 如何解决canvas层级最高问题？

方法一：用原生组件覆盖原生组件

方法二：让canvas在图片和canvas间切换

【微信小程序】解决canvas组件永远在最高层问题相关推荐

最新文章

热门文章

2、如何解决canvas层级最高问题？