有两个代码完全相同的页面，一个页面有titleNView，一个没有
分别点进去，对canvas进行操作后点击确定或者返回，操作两次
982260355
- 发布：2025-07-15 16:38
- 更新：2025-07-24 14:35
- 阅读：319
【报Bug】有导航栏的页面，canvas样式设置，第一次进页面正常，第二次进页面会失效
分类：uni-app
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 10
HBuilderX类型： 正式
HBuilderX版本号： 4.75
手机系统： Android
手机系统版本号： Android 10
手机厂商： 小米
手机机型： 小米14
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
两个页面均可以正常进行操作
两个页面均可以正常进行操作
实际结果：
没有titleNView的页面一切正常，有titleNView的页面，第二次进入页面，canvas样式设置失败
没有titleNView的页面一切正常，有titleNView的页面，第二次进入页面，canvas样式设置失败
bug描述：
当页面的"titleNView"不设置时，第一次进页面，画图一切正常，但是第二次进页面的时候，
this.ctx.lineWidth = 6;
his.ctx.strokeStyle = '#4CD964'
以上设置均会失效
但是如果设置"titleNView": false，则一切正常，
H5一切正常，只有app有问题。
最佳回复
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
看起来是 设置 titleView 增加了页面初始化，createaqueryselector 耗时增加导致的问题。
你现在的写法里你可以吧 设置画笔样式放在 boundingClientRect 逻辑内部，等待宽度设置之后执行 this.clear 和设置画笔样式。
或者你封装一下 boundingClientRect 成 Promise 等待设置完成后再继续执行。
view.boundingClientRect(data => {
// console.log('boundingClientRect', data);
this.canvasWidth = data.width
this.canvasHeight = data.height
this.clear()
//设置画笔样式
this.ctx.lineWidth = 6;
this.ctx.strokeStyle = '#4CD964' //预留更改颜色
console.log('set color');
this.ctx.lineCap = "round"
this.ctx.lineJoin = "round"
}).exec();昨天给的方案是 给 this.clear 增加定时器，延迟支持，是临时规避方案。
