uni-app（一）条件渲染

最新推荐文章于 2024-08-31 11:44:49 发布

想喝橙汁儿

最新推荐文章于 2024-08-31 11:44:49 发布

阅读量1.1k

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_46328144/article/details/109307699

版权

uni-app 条件渲染

在不同地方显示不通效果

vue页面

<view class="h1">uni-app条件渲染</view>
		<!-- #ifdef MP-WEIXIN -->
		<view>欢迎来到小程序</view>
		<!-- #endif -->
		
		<!-- #ifdef H5 -->
		<view>H5页面</view>
		<!-- #endif -->
		
		<!-- #ifdef APP-PLUS -->	
		<view>app页面</view>
		<!-- #endif -->

css 文件

/* #ifdef APP-PLUS */
		.color{color: red;}
	/* #endif */
	
	/* #ifdef MP-WEIXIN */
		.color{color: red;}
	/* #endif */
	
	/* #ifdef H5 */
		.color{color: red;}
	/* #endif */

css文件并未调用，需要调用一下

pages .json文件

方式一：不推荐

"pages": [{
			"path": "pages/index/index",
			//  #ifdef MP-WEIXIN
			"style": {
				"navigationBarTitleText": "uni-ui基础语法",
				"navigationBarBackgroundColor":"#FFA200"
			},
			// #endif
			//  #ifdef H5
			"style": {
				"navigationBarTitleText": "uni-ui基础语法",
				"navigationBarBackgroundColor":"#f0f0f0"
			},
			// #endif
			
		},

方式二：

"pages": [{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-ui基础语法",
				"navigationBarBackgroundColor":"#FFA200",
				"mp-weixin":{
					"navigationBarBackgroundColor":"#007Aff",
				},
				"app-plus":{
					"navigationBarBackgroundColor":"#aa55ff",
				}
			}
		},