【微信小程序】canvas放到wx:if下会自动添加display:none问题的解决方案

问题复现:

页面中有几组数据,借用weapp-qrcode.js在canvas上画二维码,像电影票一样,每一个都是点击“展开”才显示当前数据的二维码,其余的全部收起。
微信开发者工具中模拟器上调试没有问题,到了手机上调试的时候出问题了。第一次展开收起没有问题,之后的操作全部会在打开时canvas撑不开父元素,延迟一下后在父元素外显示二维码。且收起二维码时canvas依然存在。

<view class="qrCodeBlock" wx:if="{{qrCodeShowingIndex == index}}">
	<canvas class="qrCode" canvas-id="myQrcode-{{index}}"></canvas>
</view>

在这里插入图片描述

问题原因:

最后发现是微信小程序canvas不能包裹在wx:if里,否则真机预览或调试的时候就会出现上述问题。

解决方案:

将canvas放在hidden下。

<view class="qrCodeBlock" hidden="{{qrCodeShowingIndex != index}}">
	<canvas class="qrCode" canvas-id="myQrcode-{{index}}"></canvas>
</view>

在这里插入图片描述

### 回答1: 微信小程序canvas 可以通过以下方法关闭: 1. 在页面的 JavaScript 代码中调用 canvas 的实例的 destroy() 方法,来销毁 canvas。 2. 通过设置 canvas 元素的 style.display 属性为 "none",来隐藏 canvas。 3. 可以在页面 onUnload 生命周期函数中调用 canvas 的实例的 destroy() 方法,在页面销毁时自动销毁 canvas。 请注意,关闭 canvas 可以帮助提高小程序的性能和减少内存使用。 ### 回答2: 微信小程序提供了一个叫做canvas的组件,允许开发者在小程序中绘制图形、动画和交互效果。当我们想要关闭canvas时,可以采取以下步骤: 1. 停止canvas的绘制:使用wx.createContext()方法创建的画布对象可以调用draw()方法进行绘制。当我们想要关闭canvas时,可以使用该对象的clearRect(x, y, width, height)方法清除画布上的内容,然后调用draw()方法即可停止绘制。 2. 隐藏canvas组件:在小程序wxml文件中,我们可以通过设置canvas组件的hidden属性为true来隐藏它。当hidden属性为true时,canvas组件将不会显示在小程序页面中。 3. 销毁canvas对象:如果我们不再需要使用canvas,并且希望释放相关资源,可以调用wx.createContext()方法创建的画布对象的destroy()方法进行销毁。该方法将会销毁该画布对象,并且无法再进行绘制操作。 需要注意的是,在关闭canvas之前,我们需要确保已经保存了需要的数据或者效果,以免关闭后无法再恢复。另外,关闭canvas并不会影响其他组件或功能的正常运行,我们可以根据实际需求来选择是否关闭canvas
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值