小程序: 修改setData来隐藏canvas不生效

  1. 打开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:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210105143946731.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDEzMzcx,size_16,color_FFFFFF,t_70

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>

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值