详细问题描述
父组件中嵌套子组件 在子组件中是用canvas 无法显示 并且 在H5中的底部导航栏的页面中出现 但是闪烁 加上异步后才得以显示 .
[内容]
重现步骤
在页面上根据条件使用v-sohw显示不同的组件在其中一个子组件中使用navigator 再次跳转不同的的组件页面中 并在页面中判断 使用v-show显示不同的组件 OK 重点来了 我在这个这个子组件中无法显示出canvas 小程序能够显示 但是 H5 不能
[步骤]
perv.vue 父组件
<view class="recordItem">
<image src="/static/images/wlgz/kt.png"></image>
<view class="item_list">
<text>空调</text>
<text>关联4个设备</text>
</view>
<!-- 步骤一 -->
<navigator url="/pages/application/apiControl/apiControl?pageKey=kt" open-type="navigate" hover-class="navigator-hover" >
<image src="/static/images/wlgz/kzz.png" style="width:169upx; height: 90upx; margin-right: -30upx;"></image>
</navigator>
</view>
apiControl.vue页面
<template>
<view>
<apiCmp v-if="pageKey=='cl'"></apiCmp>
<!-- 步骤二 -->
<aircondition v-if="pageKey=='kt'"></aircondition>
</view>
</template>
aircondition.vue 子组件
<!-- 步骤三 -->
<canvas style="width: 750px; height: 400px;" canvas-id="myCanvas9" id="myCanvas9"></canvas>
JS
onReady() {
const ctx = uni.createCanvasContext('myCanvas9',this)
ctx.arc(190,80,70,0.7Math.PI,0.30Math.PI);
ctx.setFillStyle('#EEEEEE')
setTimeout(function(){
ctx.fill()
ctx.draw()
},200)
},
[结果]
无法显示
[期望]
[如果语言难以表述清晰，拍一个视频或截图，有图有真相]
IDE运行环境说明
[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app，也需要在此说明]
[IDE版本号]
[windows版本号]
[mac版本号]
uni-app运行环境说明
[运行端是h5或app或某个小程序？]
H5
[运行端版本号]
[项目是cli创建的还是HBuilderX创建的？如果是cli创建的，请更新到最新版cli再试]
[编译模式是老模板模式还是新的自定义组件模式？]
App运行环境说明
[Android版本号]
[iOS版本号]
[手机型号]
[模拟器型号]
附件
[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传]
[App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点]
[App安装包或H5地址]
[可重现代码片段]
联系方式
[QQ]
0 个回复