- 打开vant弹窗时,隐藏canvas (开发者工具调试没问题,真机上就不行了)
<canvas canvas-id="canvasIn" class="canvas" style="{{canvasflag?'left: auto':'left: 1000rpx'}};width:{{canvasWidth * 2 }}rpx;height:{{canvasHeight * 2 }}rpx;"></canvas>
<view class="item" bindtap="lookPopup" data-type="roomRateDiscount" data-text="房费折扣">
<image src="https://ms.renyihotel.com/images/mine/privilege_01.png" />
<view class="title">房费折扣</view>
<view class="subTitle">{{focusList[vipLevel].roomRateDiscount}}</view>
</view>
<van-popup show="{{ show }}" bind:close="fn" custom-style="border-radius: 12rpx;overflow: hidden;">
<view class="popupWrapper" style="min-height:{{currentType != 'freeCard'?'277rpx':'inherit'}}">
<view class="title">{{popupText}}</view>
<view class="desc" wx:if="{{currentType != 'freeCard'}}">{{popupDesc}}</view>
<view class="text1" wx:if="{{currentType == 'freeCard'}}">{{freeCardText1}}</view>
<view class="text2" wx:if="{{currentType == 'freeCard'}}">{{freeCardText2}}</view>
<view class="btn" wx:if="{{currentType == 'freeCard'}}" style="margin-bottom:52rpx" catchtap="sendFreeCard">
去赠卡
</view>
</view>
</van-popup>
方式1:
方式2:
方式3:
该元素根据canvasflag同步显示隐藏(结论:并不是真机setData页面没有更新,而是无法隐藏真机canvas)
方式4
<canvas canvas-id="canvasIn" class="canvas" style="{{canvasflag?'left: auto;position:relative;':'position:fixed;left:9000px;'}}width:{{canvasWidth * 2 }}rpx;height:{{canvasHeight * 2 }}rpx;"></canvas>
方式5
<canvas canvas-id="canvasIn" class="canvas" style="{{canvasflag?'':'position:absolute;left:-300px;top:-200px;'}}width:{{canvasWidth * 2 }}rpx;height:{{canvasHeight * 2 }}rpx;"></canvas>
方式6:
let str = 'test'
if(this.data.ctx){
str = 'ctx._context.canvas.style'
}
this.setData({
str: 'none'
// canvasflag: false
}, () => {
})
方法7 (可行)
暴力方法
canvasflag控制显示隐藏 ,当弹窗关闭后执行createdCanvas()重新创建canvas
<canvas canvas-id="canvasIn" wx:if="{{canvasflag}}" class="canvas" style="position:absolute;{{canvasflag?'':'left:9000px;'}}width:{{canvasWidth * 2 }}rpx;height:{{canvasHeight * 2 }}rpx;"></canvas>