uni-app vue3版本在APP上，定义一个背景颜色并且加入filter属性后，在tabBar页面上会非常卡

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app vue3版本在APP上，定义一个背景颜色并且加入filter属性后，在tabBar页面上会非常卡

信息类别 详情
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win10
HBuilderX Alpha
HBuilderX版本 4.36
手机系统 iOS
手机版本号 iOS 16
手机厂商 苹果
手机机型 IPhoneX
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  • 定义一个背景颜色加上CSS filter（滤镜）属性。在tabBar页面里所有操作都非常卡顿

预期结果：

  • 不会卡顿

实际结果：

  • 卡成PPT

bug描述：

  • vue3 CSS filter（滤镜）属性 在tabBar页面上会非常卡 .
  • 可以直接用官方button按钮测试。导入全局样式并且把filter属性加上就会特别卡顿就会特别卡顿

Image 1 Image 2 Image 3


Harmonyos Next教程
4 回复

没官方人来看嘛


目前在IOS手机发现。安卓系统暂无发现

顶下，都没官方看

在处理 uni-app 使用 Vue 3 版本时，如果在 tabBar 页面上应用背景颜色和 filter 属性后遇到性能问题，这通常与渲染效率和 GPU 加速相关。以下是一些可能的解决方案，通过代码示例展示如何优化这些问题。

1. 使用 CSS 硬件加速

首先，确保你的背景颜色和 filter 属性能够利用 CSS 硬件加速。硬件加速可以显著提高渲染性能。尝试使用 will-change 属性来提示浏览器将要进行的变化，从而优化渲染。

.background {
  background-color: #ff0000; /* 示例背景颜色 */
  filter: blur(5px); /* 示例 filter 属性 */
  will-change: transform, opacity; /* 提示浏览器硬件加速 */
  transform: translateZ(0); /* 强制 GPU 渲染层 */
}

2. 优化 tabBar 页面结构

确保 tabBar 页面的结构尽可能简单，避免复杂的嵌套和大量的 DOM 节点。减少 DOM 操作的频率和复杂度。

<template>
  <view class="tab-bar">
    <view class="tab-item" @click="navigateToPage('home')">首页</view>
    <view class="tab-item" @click="navigateToPage('settings')">设置</view>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToPage(page) {
      uni.switchTab({
        url: `/pages/${page}/${page}`
      });
    }
  }
}
</script>

<style scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: space-around;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
}
</style>

3. 避免频繁更新样式

如果 filter 或背景颜色需要动态更新，确保这些更新不会频繁发生。使用防抖（debounce）或节流（throttle）技术来减少更新频率。

import { debounce } from 'lodash';

export default {
  data() {
    return {
      backgroundColor: '#ff0000'
    };
  },
  methods: {
    updateColor: debounce(function(newColor) {
      this.backgroundColor = newColor;
    }, 300), // 每300ms最多更新一次
  },
  watch: {
    someTrigger(newVal) {
      this.updateColor(newVal ? '#00ff00' : '#ff0000');
    }
  }
}

结论

通过上述方法，特别是利用 CSS 硬件加速和优化页面结构，可以显著减少在 tabBar 页面上应用背景颜色和 filter 属性时的卡顿现象。确保在开发过程中监控性能，并适时调整策略以适应不同的设备和场景。

回到顶部