收藏
回答

wx:if=''渲染与canvas联动bug

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug canvas 微信iOS客户端 6.6.7 2.0.9

- 当前 Bug 的表现(可附上截图)

初始化阶段


重新渲染


- 预期表现

通过wx:if=''重新渲染后canvas标签有显示出来但是并没有在真机与模拟器上再次出现canvas图像

- 复现路径


- 提供一个最简复现 Demo


html

<view class='bac' bindtap='test'></view>

<view wx:if='{{show}}'>

  <canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>

</view>


css

.bac{

  width: 100rpx;

  height: 100rpx;

  background: #000;

}


//js

Page({

  data:{

    show:true

  },

  test:function(){

    let that = this;

    if(that.data.show == true){

      that.setData({

        show:false

      })

    }else{

      that.setData({

        show:true

      })

    }

  },

  canvasIdErrorCallback: function (e) {

    console.error(e.detail.errMsg)

  },

  onReady: function (e) {

    // 使用 wx.createContext 获取绘图上下文 context

    var context = wx.createCanvasContext('firstCanvas')


    context.setStrokeStyle("#00ff00")

    context.setLineWidth(5)

    context.rect(0, 0, 200, 200)

    context.stroke()

    context.setStrokeStyle("#ff0000")

    context.setLineWidth(2)

    context.moveTo(160, 100)

    context.arc(100, 100, 60, 0, 2 * Math.PI, true)

    context.moveTo(140, 100)

    context.arc(100, 100, 40, 0, Math.PI, false)

    context.moveTo(85, 80)

    context.arc(80, 80, 5, 0, 2 * Math.PI, true)

    context.moveTo(125, 80)

    context.arc(120, 80, 5, 0, 2 * Math.PI, true)

    context.stroke()

    context.draw()

  }

})


回答关注问题邀请回答
收藏

3 个回答

  • Jesse
    Jesse
    2018-06-13
    你这个需要销毁后 重新实例化
    2018-06-13
    有用 1
    回复 1
    • Engel
      Engel
      2018-06-13

      是的,数据刷新后能够重新出来,但是现在只想用渲染的方式去控制,我这个首屏数据量比较大不可能切换一次刷新一次

      2018-06-13
      回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-06-11

    你好,你提供的代码片段wxml乱码了,麻烦重新提供下能复现问题的代码片段,谢谢

    2018-06-11
    有用
    回复 2
    • Engel
      Engel
      2018-06-11

      直接复制啊,上面代码就是代码片段里的


      2018-06-11
      回复
    • Engel
      Engel
      2018-06-13

      代码片段不能用就没回应了么,copy技能都不用了么...

      2018-06-13
      回复
  • Engel
    Engel
    2018-06-11

    代码片段

    wechatide://minicode/PmMHU5mZ7lmE

    2018-06-11
    有用
    回复 2
    • 工号 9527
      工号 9527
      2018-06-13

      wx:if 是false 是销毁节点,

      如果你只是隐藏的话,可以用display:none

      2018-06-13
      回复
    • Engel
      Engel
      2018-06-13回复工号 9527

      改用hidden属性,首屏卡点就卡点了

      2018-06-13
      回复
登录 后发表内容