问题复现:
页面中有几组数据,借用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>