add: CSS中display示例

pages.json

@@ -349,6 +349,18 @@
       }
     },
 	{
+      "path" : "pages/CSS/display/flex",
+      "style" : {
+        "navigationBarTitleText": "display:flex"
+      }
+	},
+	{
+      "path" : "pages/CSS/display/none",
+      "style" : {
+        "navigationBarTitleText": "display:none"
+      }
+	},
+    {
       "path": "pages/CSS/flex/align-content",
       "style": {
         "navigationBarTitleText": "align-content"
@@ -808,7 +820,7 @@
         "navigationBarTitleText": "自定义下拉刷新的scroll-view属性示例",
         "enablePullDownRefresh": false
       }
-    }
+    },
     ],
   "globalStyle": {
     "pageOrientation": "portrait",

pages/CSS/display/flex.uvue

+<template>
+<!-- #ifdef APP -->
+<view class="page" style="flex:1">
+<!-- #endif -->
+	<view class="head">
+		<text class="tip">下面有一个灰色区域，display默认值为flex</text>
+		<text class="tip">当前display值：{{display}}</text>
+	</view>
+	<view class="content" :style="{display:display}">
+		<text style="background-color: aquamarine;">展示display区域</text>
+	</view>
+	<button @tap="switchDisplay">切换display属性</button>
+<!-- #ifdef APP -->
+</view>
+<!-- #endif -->
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			display: 'flex'
+		}
+	},
+	methods: {
+		switchDisplay() {
+			this.display = ('flex'==this.display)?'none':'flex';
+		}
+	}
+}
+</script>
+
+<style>
+.page {
+	align-items: center;
+	height: 100%;
+}
+.head {
+	margin-top: 10px;
+	margin-bottom: 10px;
+	align-items: center;
+}
+.tip {
+	color: red;
+}
+.content {
+	border: 10rpx dotted blue;
+	margin: 50px 0px;
+	padding: 50px;
+	width: 200px;
+	height: 200px;
+	background-color: gray;
+	align-items: center;
+	justify-content: center;
+}
+</style>

pages/CSS/display/none.uvue

+<template>
+<!-- #ifdef APP -->
+<view class="page" style="flex:1">
+<!-- #endif -->
+	<view class="head">
+		<text class="tip">下面有一个灰色区域，display默认值为none</text>
+		<text class="tip">当前display值：{{display}}</text>
+	</view>
+	<view class="content" :style="{display:display}">
+		<text style="background-color: aquamarine;">展示display区域</text>
+	</view>
+	<button @tap="switchDisplay">切换display属性</button>
+<!-- #ifdef APP -->
+</view>
+<!-- #endif -->
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			display: 'none'
+		}
+	},
+	methods: {
+		switchDisplay() {
+			this.display = ('flex'==this.display)?'none':'flex';
+		}
+	}
+}
+</script>
+
+<style>
+.page {
+	align-items: center;
+	height: 100%;
+}
+.head {
+	margin-top: 10px;
+	margin-bottom: 10px;
+	align-items: center;
+}
+.tip {
+	color: red;
+}
+.content {
+	border: 10rpx solid blue;
+	margin: 50px 0px;
+	padding: 50px;
+	width: 200px;
+	height: 200px;
+	background-color: gray;
+	align-items: center;
+	justify-content: center;
+}
+</style>

pages/tabBar/CSS.uvue

@@ -119,6 +119,21 @@
 							},
 						] as Page[],
 					},
+					{
+					  id: 'display',
+					  name: 'display',
+					  open: false,
+					  pages: [
+							{
+								name: 'flex',
+								url: '/pages/CSS/display/flex',
+							},
+							{
+								name: 'none',
+								url: '/pages/CSS/display/none',
+							}
+					  ] as Page[],
+					},
 					{
 						id: 'flex',
 						name: 'flex',