x***@163.com
x***@163.com
  • 发布:2023-12-15 10:13
  • 更新:2023-12-15 10:33
  • 阅读:137

canvas作为组件后,循环渲染组件只渲染出一个

分类:uni-app
// 子组件  A  
<template>  
    <view>  
        <canvas style="width: 100px; height: 100px;" canvas-id="firstCanvas"></canvas>  
    </view>  
</template>  
<script>  
    export default {  
        mounted() {  
            this.draw()  
        },  
                methods:{  
                  draw(){  
                     let context = uni.createCanvasContext('firstCanvas',this)  
                   }  
              }  
    }  
</script>
// 父组件 B  
<template>  
    <view v-for="item in 10" :key="item">  
        <A></A>  
    </view>  
</template>  

在父组件中 只有第一个组件A绘制出来了,通过检查元素其余组件A也都在,只是没内容。初步怀疑是canvas-id="firstCanvas"是同一个。

2023-12-15 10:13 负责人:无 分享
已邀请:

最佳回复

x***@163.com

x***@163.com (作者)

找到原因了,官网注意事项::::同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作。 就是我要循环要创建动态id吗

  • x***@163.com (作者)

    实验成功,留着这个帖子帮助更多人

    2023-12-15 10:32

  • x***@163.com (作者)

    :canvas-id="uuid" uuid动态创建

    2023-12-15 10:32

要回复问题请先登录注册