08.防止页面闪烁

vue会把{{ xxx }} 编译成我们指定的数据,但是在编译的那一刹那间, {{ xxx }} 还是会显示出来的。如下图 :

ps :这种情况只会在直接使用vue才会出现!!!

解决方法

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
[v-cloak]{display: none;}
</style>
<body>
	<div id='app' v-cloak>
		{{msg}}
	</div>
	<script type="text/javascript" src="vue.min.js"></script>
	<script type="text/javascript">
		new Vue({
			el : '#app',
			data : {
				msg : 'hello'
			}
		})
	</script>
</body>
</html>

 

### 解决 UniApp 动态修改 TabBar 页面闪烁的方法 为了避免在 UniApp 中动态修改 TabBar 时出现页面闪烁的情况,可以采用一种优化方案来减少组件的频繁渲染和销毁。具体做法是在主页面中引入 TabBar 组件及其关联页面,从而仅需控制单个页面的显示与隐藏。 #### 主要策略概述 通过创建一个包含所有 TabBar 关联页面的容器页面,在此容器内部管理各个子页面的状态变化而不影响整个应用界面的整体布局结构。这样做的好处是可以保持 TabBar 的稳定性和一致性,防止其随页面切换而重新加载造成视觉上的不连续感[^1]。 #### 实现步骤详解 为了达到上述目标,建议按照以下方式进行开发: - **构建统一入口文件**:建立一个新的 Vue 文件作为应用程序的主要视图层,负责承载所有的底部导航栏项以及它们所指向的具体业务逻辑页面。 - **封装通用 TabBar 部件**:设计并实现一个可复用性强且易于维护更新的自定义 TabBar 控制器模块,用于处理不同场景下的交互行为(比如选中状态改变事件监听),并通过 props 或者全局配置传递必要的参数给它。 - **调整路由机制**:对于每一个实际存在的二级菜单选项而言,应该将其映射成独立于外部框架之外的小型 SPA (Single Page Application),即每个 tab 对应着一个小的应用程序实例;当用户触发跳转动作时,则只需更改当前激活标签页的内容区域部分即可完成平滑过渡效果,而不是像传统方式那样整屏刷新重绘全部 DOM 结构[^2]. ```javascript // main.vue - 应用主页面 <template> <view class="container"> <!-- 自定义 tabBar --> <CustomTabBar :currentIndex.sync="currentTabIndex"/> <!-- 子页面展示区 --> <keep-alive> <component v-bind:is="currentPage"></component> </keep-alive> </view> </template> <script> import CustomTabBar from './components/CustomTabBar'; const pages = ['Home', 'Device']; // 假设有两个tab对应的不同页面名称 export default { components: { CustomTabBar }, data(){ return{ currentTabIndex: 0, currentPage: '' } }, watch:{ currentTabIndex(newVal){ this.currentPage = pages[newVal]; } } } </script> ``` 在此基础上,还需要确保每当某个特定条件满足时能够及时通知到 `main.vue` 来同步最新的索引位置信息,这可以通过调用类似于 `setTabBarIndex()` 这样的 API 函数来达成目的。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值