"tabBar": {
"fontSize": "10px",
"height": "50px",
"borderStyle": "white",
"selectedColor": "#FB1F1E",
"color": "#C7C7C7",
"iconWidth": "24px",
"blurEffect": "extralight"
}
等下班
- 发布：2023-09-11 14:10
- 更新：2024-08-06 17:04
- 阅读：372
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： window 11
HBuilderX类型： 正式
HBuilderX版本号： 3.8.12
手机系统： Android
手机系统版本号： Android 12
手机厂商： OPPO
手机机型： FINDX 3 PRO
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
"tabBar": {
"fontSize": "10px",
"height": "50px",
"borderStyle": "white",
"selectedColor": "#FB1F1E",
"color": "#C7C7C7",
"iconWidth": "24px",
"blurEffect": "extralight"
}
"tabBar": {
"fontSize": "10px",
"height": "50px",
"borderStyle": "white",
"selectedColor": "#FB1F1E",
"color": "#C7C7C7",
"iconWidth": "24px",
"blurEffect": "extralight"
}预期结果：
开启blurEffect页面元素不闪动, 页面滚动流畅
开启blurEffect页面元素不闪动, 页面滚动流畅
实际结果：
开启blurEffect页面元素闪动，页面滚动不流畅
开启blurEffect页面元素闪动，页面滚动不流畅
bug描述：
页面开启blurEffect高斯模糊后，编译到APP,导致tabbar页面滚动时页面元素抖动 闪动 ，特别是使用position: sticky;已经position: absolute;的元素。以及页面滚动性能下降，流畅度降低。复现demo已上传，附件3：blurEffect.zip;附件1，附件2：录屏
