uni-app tabbar栏切换到主页时 页面顶部模块闪烁问题

uni-app tabbar栏切换到主页时 页面顶部模块闪烁问题

操作步骤：

  • 回来切换tabbar时，首页顶部view闪烁

预期结果：

  • 停止闪烁

实际结果：

  • 停止闪烁

bug描述：

  • 此应用由wanlshop开发电商系统，很多客户近期遇到类似问题
  • bug如视频所示
  • 视频链接

表格信息

信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 4.01
手机系统 Android
手机系统版本号 Android 14
手机厂商 vivo
手机机型 华为鸿蒙、vivo等其他设备
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app tabbar栏切换到主页时 页面顶部模块闪烁问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

没人回答吗？

更多关于uni-app tabbar栏切换到主页时 页面顶部模块闪烁问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


测试项目提供一下 闪烁牵扯的诱因太多需要具体项目具体分析

同遇到这情况。 感觉像swiper-item导致 但是大部分手机又正常， 部分手机闪烁相当严重，有问题的手机卸载掉之后 重新安装又正常不跳， 下次进的时候可能又闪起来了。

同遇这个问题，是swiper-item导致的。 搜索框里面有swiper-item导致里面字会一直闪烁。等加载完成就好，但是切换回来后，像是重新加载，再次闪烁。搜索框里面可以考虑把swiper-item删掉，只保留搜索商品类目几个字就好。 搜索框下面的横向滚动类目的问题就大了，加载的时候会把每个类目下的swiper-item的页面初始化完成，如果类目过多，就会一直闪烁。尝试在类目循环里面的使用v-if="‘cid’ + item.id === currentItemId"，目前出现滑动后不会调用接口，提示疯狂加载中，还在处理中。。。 不知道有没有谁有更好的解决方法

wanlshop真机测试 红米K60至尊 就是这么闪

红米note13 Pro 疯狂闪烁啊 找不到原因

tabBar页面都会闪 不知道什么原因导致的 官方关注一下啊

我把这个关了就好了，大家帮忙看下这个方法能不能行得通

是这样 注释就不闪了

在 uni-app 中，当切换到带有 TabBar 的主页面时，页面顶部的模块出现闪烁问题，通常是由于以下原因之一：

  1. 页面生命周期触发：每次切换到 TabBar 页面时，onLoad、onShow 等生命周期钩子会重新触发，可能导致页面内容重新渲染，从而出现闪烁。
  2. 数据请求或计算：如果页面在 onLoad 或 onShow 中进行了数据请求或复杂的计算操作，可能会导致页面内容重新加载，从而出现闪烁。
  3. CSS 或样式问题：某些 CSS 样式或动画可能会导致页面内容在加载时出现闪烁。

解决方法

1. 优化生命周期钩子

  • 避免在 onLoad 或 onShow 中进行不必要的操作。
  • 如果数据请求是必要的，可以缓存数据，避免每次切换都重新请求。
  • 使用 onReady 或 mounted 代替 onLoad 或 onShow，确保页面完全加载后再进行操作。
export default {
  data() {
    return {
      loaded: false
    };
  },
  onShow() {
    if (!this.loaded) {
      this.fetchData();
      this.loaded = true;
    }
  },
  methods: {
    fetchData() {
      // 数据请求逻辑
    }
  }
};

2. 使用 keep-alive

  • 使用 keep-alive 缓存页面组件，避免每次切换都重新渲染。
  • 在 pages.json 中配置 keep-alive。
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      },
      "keep-alive": true
    }
  ]
}

3. 优化 CSS 和样式

  • 检查页面顶部的模块是否有动画或过渡效果，可能会导致闪烁。
  • 确保 CSS 样式正确，避免不必要的重绘或回流。
.top-module {
  transition: none; /* 禁用不必要的过渡效果 */
}

4. 使用 v-if 或 v-show 控制渲染

  • 使用 v-if 或 v-show 控制页面顶部模块的渲染，避免不必要的重新渲染。
<template>
  <div>
    <div v-if="showTopModule" class="top-module">
      <!-- 顶部模块内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTopModule: false
    };
  },
  onShow() {
    this.showTopModule = true;
  },
  onHide() {
    this.showTopModule = false;
  }
};
</script>

5. 检查网络请求

  • 如果页面顶部模块的内容依赖于网络请求，确保请求完成后才显示内容，避免闪烁。
export default {
  data() {
    return {
      dataLoaded: false
    };
  },
  onShow() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟网络请求
      setTimeout(() => {
        this.dataLoaded = true;
      }, 500);
    }
  }
};

<template>
  <div>
    <div v-if="dataLoaded" class="top-module">
      <!-- 顶部模块内容 -->
    </div>
  </div>
</template>
回到顶部