uni-app 安卓开启高斯模糊（blurEffect）页面闪烁

开发环境	版本号	项目创建方式
Windows	win 11	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.12

手机系统：Android

手机系统版本号：Android 14

手机厂商：小米

手机机型：14

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

{
    "leftWindow": {
        "path": "windows/left-window.vue",
        "style": {
            "width": "300px",
            "position": "sticky",
            "top": "0"
        }
    },
    "topWindow": {
        "path": "windows/top-window.vue",
        "style": {
            "height": "60px"
        }
    },
    "pages": [
        {
            "path": "pages/tabBar/Market/Market",
            "style": {
                "navigationBarTitleText": "行情",
                "app-plus": {
                    "bounce": "none"
                }
            }
        },
        {
            "path": "pages/tabBar/Account/Account",
            "style": {
                "navigationBarTitleText": "产品",
                "app-plus": {
                    "bounce": "none"
                }
            }
        },
        {
            "path": "pages/tabBar/Group/Group",
            "style": {
                "navigationBarTitleText": "组合"
            }
        },
        {
            "path": "pages/tabBar/position/position",
            "style": {
                "navigationBarTitleText": "持仓"
            }
        },
        {
            "path": "pages/tabBar/Personal/Personal",
            "style": {
                "navigationBarTitleText": "我的"
            }
        },
        {
            "path": "pages/views/login/login",
            "style": {
                "navigationBarTitleText": "登录",
                "enablePullDownRefresh": false
            }
        },
        {
            "path": "pages/views/search/search",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,
                "app-plus": {
                    "animationType": "slide-in-right",
                    "animationDuration": 300
                }
            }
        }
    ],
    "globalStyle": {
        "navigationStyle": "custom",
        "pageOrientation": "portrait",
        "navigationBarTitleText": "219",
        "navigationBarTextStyle": "white",
        "navigationBarBackgroundColor": "#007AFF",
        "backgroundColor": "#F8F8F8",
        "backgroundColorTop": "#F4F5F6",
        "backgroundColorBottom": "#F4F5F6",
        "mp-360": {
            "navigationStyle": "custom"
        },
        "h5": {
            "navigationBarTextStyle": "black",
            "navigationBarBackgroundColor": "#F1F1F1"
        }
    },
    "tabBar": {
        "color": "#D1D1D1",
        "blurEffect": "none",
        "selectedColor": "#13227A",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/tabBar/Market/Market",
                "iconPath": "static/icon/nav/AAVE.png",
                "selectedIconPath": "static/icon/nav/AAVE_1.png",
                "text": "行情"
            },
            {
                "pagePath": "pages/tabBar/Account/Account",
                "iconPath": "static/icon/nav/index.png",
                "selectedIconPath": "static/icon/nav/index_1.png",
                "text": "账户"
            },
            {
                "pagePath": "pages/tabBar/Group/Group",
                "iconPath": "static/icon/nav/Group.png",
                "selectedIconPath": "static/icon/nav/Group_1.png",
                "text": "组合"
            },
            {
                "pagePath": "pages/tabBar/Position/Position",
                "iconPath": "static/icon/nav/Position.png",
                "selectedIconPath": "static/icon/nav/Position_1.png",
                "text": "持仓"
            },
            {
                "pagePath": "pages/tabBar/Personal/Personal",
                "iconPath": "static/icon/nav/my.png",
                "selectedIconPath": "static/icon/nav/my_1.png",
                "text": "我的"
            }
        ]
    }
}

操作步骤：

pages.json —> tabbar ----> “blurEffect”: “extralight”,

安卓开启高斯模糊页面滚动闪烁

详见zip 文件


## 预期结果：

pages.json ---> tabbar ----> "blurEffect": "extralight", 

安卓开启高斯模糊页面 正常

实际结果：

pages.json —> tabbar ----> “blurEffect”: “extralight”,

安卓开启高斯模糊页面滚动闪烁

详见zip 文件


## bug描述：

pages.json ---> tabbar ----> "blurEffect": "extralight", 

安卓开启高斯模糊页面 滚动闪烁  

详见zip 文件

更多关于uni-app 安卓开启高斯模糊（blurEffect）页面闪烁的实战教程也可以访问 https://www.itying.com/category-93-b0.html

htzhanglong 1楼

vue页面使用webview渲染目前部分内核版本无法适配毛玻璃效果。特别是使用position: sticky;已经position: absolute;的元素，暂时没有解决方案。临时方案： 1。使用nvue页面，原生渲染适配毛玻璃效果兼容性更好。 2。 vue页面尽量避免position: sticky;position: absolute;的元素

更多关于uni-app 安卓开启高斯模糊（blurEffect）页面闪烁的实战教程也可以访问 https://www.itying.com/category-93-b0.html

nodeper 2楼

在 Uni-app 中实现高斯模糊效果时，可能会遇到页面闪烁的问题，尤其是在安卓设备上。以下是可能的原因及解决方法：

问题原因

性能问题：
- 高斯模糊是一个计算密集型操作，尤其是在安卓设备上，如果性能不足，可能会导致页面渲染卡顿或闪烁。
渲染机制：
- 安卓设备的渲染机制与 iOS 不同，可能会对高斯模糊的处理方式不同，导致页面闪烁。
频繁重绘：
- 如果高斯模糊区域需要频繁重绘（例如背景动态变化），可能会导致页面闪烁。

解决方法

1. 优化高斯模糊实现

使用原生插件或第三方库实现高斯模糊，而不是纯 CSS 或 JavaScript 实现，以提高性能。
推荐使用 uni-app 插件市场中的高斯模糊插件，例如 uni-blur。

如果使用 CSS 实现高斯模糊，可以尝试以下代码：

.blur-effect {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5); /* 调整透明度 */
}

注意：backdrop-filter 在部分安卓设备上可能不支持或性能较差。

2. 减少高斯模糊区域

仅对需要模糊的区域应用高斯模糊，而不是整个页面。
使用静态图片作为模糊背景，而不是实时计算模糊效果。

3. 使用图片替代实时模糊

如果背景是固定的，可以提前生成一张模糊后的图片，直接使用图片作为背景，避免实时计算。

4. 启用硬件加速

在 CSS 中启用硬件加速，可以改善渲染性能：

.blur-effect {
    transform: translateZ(0);
    will-change: transform;
}

5. 减少页面重绘

避免在高斯模糊区域频繁更新内容或样式。
使用 v-if 或 v-show 控制高斯模糊元素的显示与隐藏，减少不必要的渲染。

6. 使用原生插件

如果 Uni-app 的高斯模糊效果无法满足需求，可以考虑开发或使用原生插件来实现高斯模糊。例如，使用 Android 的原生 RenderScript 或 BlurView 库。

7. 测试与兼容性

在不同安卓设备上测试高斯模糊效果，确保兼容性。
如果某些设备无法支持高斯模糊，可以提供降级方案（例如使用半透明背景）。

示例代码

以下是一个简单的 Uni-app 高斯模糊实现示例：

<template>
  <view class="container">
    <image src="/static/background.jpg" class="background" />
    <view class="blur-effect">
      <text>这是一个高斯模糊区域</text>
    </view>
  </view>
</template>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.blur-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 200px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>