diff --git a/pages/API/download-file/download-file.uvue b/pages/API/download-file/download-file.uvue
index 6bb7cebbaa6bcd1dfc1466d86d6aa86c7e7dd1a1..202c5f44e7087aad12e2cc6b8708b4058f57da6c 100644
--- a/pages/API/download-file/download-file.uvue
+++ b/pages/API/download-file/download-file.uvue
@@ -1,83 +1,89 @@
 <template>
-	<view>
-		<page-head :title="title"></page-head>
-		<view class="uni-padding-wrap uni-common-mt">
-			<view v-if="imageSrc" class="image-container">
-				<image class="img" :src="imageSrc" mode="center" />
-			</view>
-			<view v-else style="margin-top: 50px;">
-				<view class="uni-hello-text">
-					点击按钮下载服务端示例图片（下载网络文件到本地临时目录）
-				</view>
-				<view class="uni-btn-v">
-					<button type="primary" @tap="downloadImage">下载</button>
-				</view>
-			</view>
-		</view>
-	</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view>
+      <page-head :title="title"></page-head>
+      <view class="uni-padding-wrap uni-common-mt">
+        <view v-if="imageSrc" class="image-container">
+          <image class="img" :src="imageSrc" mode="center" />
+        </view>
+        <view v-else style="margin-top: 50px">
+          <view class="uni-hello-text">
+            点击按钮下载服务端示例图片（下载网络文件到本地临时目录）
+          </view>
+          <view class="uni-btn-v">
+            <button type="primary" @tap="downloadImage">下载</button>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 <script>
-	import DownloadTask from 'uts.sdk.modules.DCloudUniNetwork.DownloadTask';
-	export default {
-		data() {
-			return {
-				title: 'downloadFile',
-				imageSrc: '',
-				task: null as DownloadTask | null,
-				pageVisible: false
-			}
-		},
-		onLoad() {
-			this.pageVisible = true;
-		},
-		onUnload() {
-			this.imageSrc = '';
-			this.pageVisible = false;
-			uni.hideLoading();
-			this.task?.abort();
-		},
-		methods: {
-			downloadImage: function() {
-				uni.showLoading({
-					title: '下载中'
-				})
-				var self = this
-				this.task = uni.downloadFile({
-					url: "https://web-assets.dcloud.net.cn/unidoc/zh/uni-app.png",
-					success(res) {
-						if (this.pageVisible) {
-							console.log('downloadFile success, res is', res)
-							self.imageSrc = res.tempFilePath;
-							uni.hideLoading();
-						}
-					},
-					fail: (err) => {
-						if (this.pageVisible) {
-							console.log('downloadFile fail, err is:', err)
-							uni.hideLoading();
-						}
+import DownloadTask from 'uts.sdk.modules.DCloudUniNetwork.DownloadTask';
+export default {
+	data() {
+		return {
+			title: 'downloadFile',
+			imageSrc: '',
+			task: null as DownloadTask | null,
+			pageVisible: false
+		}
+	},
+	onLoad() {
+		this.pageVisible = true;
+	},
+	onUnload() {
+		this.imageSrc = '';
+		this.pageVisible = false;
+		uni.hideLoading();
+		this.task?.abort();
+	},
+	methods: {
+		downloadImage: function() {
+			uni.showLoading({
+				title: '下载中'
+			})
+			var self = this
+			this.task = uni.downloadFile({
+				url: "https://web-assets.dcloud.net.cn/unidoc/zh/uni-app.png",
+				success(res) {
+					if (this.pageVisible) {
+						console.log('downloadFile success, res is', res)
+						self.imageSrc = res.tempFilePath;
+						uni.hideLoading();
 					}
-				});
-				this.task?.onProgressUpdate((update) => {
+				},
+				fail: (err) => {
 					if (this.pageVisible) {
-						console.log("progress : ", update.progress);
+						console.log('downloadFile fail, err is:', err)
+						uni.hideLoading();
 					}
-				})
-			}
+				}
+			});
+			this.task?.onProgressUpdate((update) => {
+				if (this.pageVisible) {
+					console.log("progress : ", update.progress);
+				}
+			})
 		}
 	}
+}
 </script>
 
 <style>
-	.img {
-		width: 500rpx;
-		height: 500rpx;
-		margin: 0 auto;
-	}
+.img {
+  width: 500rpx;
+  height: 500rpx;
+  margin: 0 auto;
+}
 
-	.image-container {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-</style>
\ No newline at end of file
+.image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/pages/API/event-bus/event-bus.uvue b/pages/API/event-bus/event-bus.uvue
index 6abf994423dcf2b4dba93b7841d277901c711efa..c33737a8a15ea83d5d8243fb2658e6e29178601f 100644
--- a/pages/API/event-bus/event-bus.uvue
+++ b/pages/API/event-bus/event-bus.uvue
@@ -1,24 +1,30 @@
 <template>
-  <view>
-    <button @click="on">开始监听</button>
-    <button @click="once">监听一次</button>
-    <button @click="off">取消监听</button>
-    <button @click="emit">触发监听</button>
-    <button @click="clear">清空消息</button>
-    <view class="box">
-      <view>收到的消息：</view>
-      <view>
-        <view v-for="(item, index) in log" :key="index">{{ item }}</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view>
+      <button @click="on">开始监听</button>
+      <button @click="once">监听一次</button>
+      <button @click="off">取消监听</button>
+      <button @click="emit">触发监听</button>
+      <button @click="clear">清空消息</button>
+      <view class="box">
+        <view>收到的消息：</view>
+        <view>
+          <view v-for="(item, index) in log" :key="index">{{ item }}</view>
+        </view>
       </view>
     </view>
-  </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
 <script lang="ts">
 export default {
   data() {
     return {
-      log: [] as string[]
+      log: [] as string[],
     }
   },
   methods: {
@@ -39,8 +45,8 @@ export default {
     },
     clear() {
       this.log.length = 0
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -48,4 +54,4 @@ export default {
 .box {
   padding: 10px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/API/get-device-info/get-device-info.uvue b/pages/API/get-device-info/get-device-info.uvue
index 0dc56465df9b8bf7b3b28af5d0c107b98955bdac..9f64d3d31a926a1954baec993d3c1fc8b7e16abe 100644
--- a/pages/API/get-device-info/get-device-info.uvue
+++ b/pages/API/get-device-info/get-device-info.uvue
@@ -1,62 +1,79 @@
 <template>
-	<view>
-		<page-head :title="title"></page-head>
-		<view class="uni-common-mt">
-			<view class="uni-list">
-				<view class="uni-list">
-					<view class="uni-list-cell" v-for="(item,_) in items" style="align-items: center;">
-						<view class="uni-pd">
-							<view class="uni-label" style="width:180px;">{{item.label}}</view>
-						</view>
-						<view class="uni-list-cell-db">
-							<textarea :auto-height="true" :disabled="true" placeholder="未获取" :value="item.value" />
-						</view>
-					</view>
-				</view>
-			</view>
-			<view class="uni-padding-wrap">
-				<view class="uni-btn-v">
-					<button type="primary" @tap="getDeviceInfo">获取设备信息</button>
-				</view>
-			</view>
-		</view>
-	</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view>
+      <page-head :title="title"></page-head>
+      <view class="uni-common-mt">
+        <view class="uni-list">
+          <view class="uni-list">
+            <view
+              class="uni-list-cell"
+              v-for="(item, _) in items"
+              style="align-items: center"
+            >
+              <view class="uni-pd">
+                <view class="uni-label" style="width: 180px">{{
+                  item.label
+                }}</view>
+              </view>
+              <view class="uni-list-cell-db">
+                <textarea
+                  :auto-height="true"
+                  :disabled="true"
+                  placeholder="未获取"
+                  :value="item.value"
+                />
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="uni-padding-wrap">
+          <view class="uni-btn-v">
+            <button type="primary" @tap="getDeviceInfo">获取设备信息</button>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
-<script>
-	type Item = {
-		label : string,
-		value : string,
-	}
-	export default {
-		data() {
-			return {
-				title: 'getDeviceInfo',
-				items: [] as Item[],
-			}
-		},
-		onUnload:function(){
-		},
-		methods: {
-			getDeviceInfo: function () {
-				const res = uni.getDeviceInfo();
-				//类型对象暂时不支持forin或Object.keys(), 临时通过字符串进行转化。
-				const json = JSON.stringify(res);
-				const result = JSON.parse<Map<string, any>>(json);
-				this.items = [] as Item[];
-				result.forEach((value, key) => {
-					const item = {
-						label: key,
-						value: "" + value
-					} as Item;
-					this.items.push(item);
-				})
-			}
+<script>
+type Item = {
+	label : string,
+	value : string,
+}
+export default {
+	data() {
+		return {
+			title: 'getDeviceInfo',
+			items: [] as Item[],
+		}
+	},
+	onUnload:function(){
+	},
+	methods: {
+		getDeviceInfo: function () {
+			const res = uni.getDeviceInfo();
+			//类型对象暂时不支持forin或Object.keys(), 临时通过字符串进行转化。
+			const json = JSON.stringify(res);
+			const result = JSON.parse<Map<string, any>>(json);
+			this.items = [] as Item[];
+			result.forEach((value, key) => {
+				const item = {
+					label: key,
+					value: "" + value
+				} as Item;
+				this.items.push(item);
+			})
 		}
 	}
+}
 </script>
 
 <style>
-	.uni-pd {
-		padding-left: 30rpx;
-	}
+.uni-pd {
+  padding-left: 30rpx;
+}
 </style>
diff --git a/pages/API/get-system-info/get-system-info.uvue b/pages/API/get-system-info/get-system-info.uvue
index 9a8705f1315684f9b0cb57898e76073b0a7b144d..62bfa7c3b7a6b09ccf13782d863528f1f2854688 100644
--- a/pages/API/get-system-info/get-system-info.uvue
+++ b/pages/API/get-system-info/get-system-info.uvue
@@ -1,63 +1,82 @@
 <template>
-	<view>
-		<page-head :title="title"></page-head>
-		<view class="uni-common-mt">
-			<view class="uni-list">
-				<view class="uni-list-cell" v-for="(item,_) in items" style="align-items: center;">
-					<view class="uni-pd">
-						<view class="uni-label" style="width:180px;">{{item.label}}</view>
-					</view>
-					<view class="uni-list-cell-db">
-						<textarea :auto-height="true" :disabled="true" placeholder="未获取" :value="item.value" />
-					</view>
-				</view>
-			</view>
-			<view class="uni-padding-wrap">
-				<view class="uni-btn-v">
-					<button type="primary" @tap="getSystemInfo">获取设备系统信息</button>
-				</view>
-			</view>
-		</view>
-	</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view>
+      <page-head :title="title"></page-head>
+      <view class="uni-common-mt">
+        <view class="uni-list">
+          <view
+            class="uni-list-cell"
+            v-for="(item, _) in items"
+            style="align-items: center"
+          >
+            <view class="uni-pd">
+              <view class="uni-label" style="width: 180px">{{
+                item.label
+              }}</view>
+            </view>
+            <view class="uni-list-cell-db">
+              <textarea
+                :auto-height="true"
+                :disabled="true"
+                placeholder="未获取"
+                :value="item.value"
+              />
+            </view>
+          </view>
+        </view>
+        <view class="uni-padding-wrap">
+          <view class="uni-btn-v">
+            <button type="primary" @tap="getSystemInfo">
+              获取设备系统信息
+            </button>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 <script>
-	type Item = {
-		label : string,
-		value : string,
-	}
-	export default {
-		data() {
-			return {
-				title: 'getSystemInfo',
-				items: [] as Item[],
-			}
-		},
-		onUnload: function () {
-		},
-		methods: {
-			getSystemInfo: function () {
-				uni.getSystemInfo({
-					success: (res) => {
-						//类型对象暂时不支持forin或Object.keys(), 临时通过字符串进行转化。
-						const json = JSON.stringify(res);
-						const result = JSON.parse<Map<string, any>>(json);
-						this.items = [] as Item[];
-						result.forEach((value, key) => {
-							const item = {
-								label: key,
-								value: "" + value
-							} as Item;
-							this.items.push(item);
-						})
-					},
-				})
-			}
+type Item = {
+	label : string,
+	value : string,
+}
+export default {
+	data() {
+		return {
+			title: 'getSystemInfo',
+			items: [] as Item[],
+		}
+	},
+	onUnload: function () {
+	},
+	methods: {
+		getSystemInfo: function () {
+			uni.getSystemInfo({
+				success: (res) => {
+					//类型对象暂时不支持forin或Object.keys(), 临时通过字符串进行转化。
+					const json = JSON.stringify(res);
+					const result = JSON.parse<Map<string, any>>(json);
+					this.items = [] as Item[];
+					result.forEach((value, key) => {
+						const item = {
+							label: key,
+							value: "" + value
+						} as Item;
+						this.items.push(item);
+					})
+				},
+			})
 		}
 	}
+}
 </script>
 
 <style>
-	.uni-pd {
-		padding-left: 30rpx;
-	}
-</style>
\ No newline at end of file
+.uni-pd {
+  padding-left: 30rpx;
+}
+</style>
diff --git a/pages/API/modal/modal.uvue b/pages/API/modal/modal.uvue
index 9167fe80e83f50a1829e081de0419b74d67a6052..a2dab955169bfcabd624e7fda47c1dc683d2b4ff 100644
--- a/pages/API/modal/modal.uvue
+++ b/pages/API/modal/modal.uvue
@@ -1,78 +1,85 @@
 <template>
-    <view>
-        <page-head :title="title"></page-head>
-		<view class="uni-list">
-		    <radio-group @change="radioChange">
-		        <radio class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
-		            :class="index < items.length - 1 ? 'uni-list-cell-line': ''" :value="item.value"
-		            :checked="index === current">
-		            {{item.name}}
-		        </radio>
-		    </radio-group>
+	<!-- #ifdef APP -->
+	<scroll-view style="flex: 1">
+		<!-- #endif -->
+		<view>
+			<page-head :title="title"></page-head>
+			<view class="uni-list">
+				<radio-group @change="radioChange">
+					<radio class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
+						:class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value"
+						:checked="index === current">
+						{{ item.name }}
+					</radio>
+				</radio-group>
+			</view>
+			<view class="uni-list">
+				<view class="uni-list-cell uni-list-cell-pd">
+					<view class="uni-list-cell-db">是否显示取消按钮</view>
+					<switch :checked="showCancelSelect" @change="showCancelChange" />
+				</view>
+				<view class="uni-list-cell uni-list-cell-pd">
+					<view class="uni-list-cell-db">定制取消文案</view>
+					<switch :checked="cancelTextSelect" @change="cancelTextChange" />
+				</view>
+				<view class="uni-list-cell uni-list-cell-pd">
+					<view class="uni-list-cell-db">定制确认文案</view>
+					<switch :checked="confirmTextSelect" @change="confirmTextChange" />
+				</view>
+				<view class="uni-list-cell uni-list-cell-pd">
+					<view class="uni-list-cell-db">是否显示输入框</view>
+					<switch :checked="editableSelect" @change="editableChange" />
+				</view>
+				<view class="uni-list-cell uni-list-cell-pd">
+					<view class="uni-list-cell-db">是否定制输入提示词</view>
+					<switch :checked="placeholderTextSelect" @change="placeholderTextChange" />
+				</view>
+			</view>
+			<view class="uni-padding-wrap uni-common-mt">
+				<view class="uni-btn-v">
+					<button class="uni-btn-v" type="default" @tap="modalTap">
+						modal测试
+					</button>
+				</view>
+				<text>{{ exeRet }}</text>
+			</view>
 		</view>
-		<view class="uni-list">
-		  <view class="uni-list-cell uni-list-cell-pd">
-		    <view class="uni-list-cell-db">是否显示取消按钮</view>
-		    <switch :checked="showCancelSelect" @change="showCancelChange"/>
-		  </view>
-		  <view class="uni-list-cell uni-list-cell-pd">
-		    <view class="uni-list-cell-db">定制取消文案</view>
-		    <switch :checked="cancelTextSelect" @change="cancelTextChange"/>
-		  </view>
-		  <view class="uni-list-cell uni-list-cell-pd">
-		    <view class="uni-list-cell-db">定制确认文案</view>
-		    <switch :checked="confirmTextSelect" @change="confirmTextChange"/>
-		  </view>
-		  <view class="uni-list-cell uni-list-cell-pd">
-		    <view class="uni-list-cell-db">是否显示输入框</view>
-		    <switch :checked="editableSelect" @change="editableChange"/>
-		  </view>
-		  <view class="uni-list-cell uni-list-cell-pd">
-		    <view class="uni-list-cell-db">是否定制输入提示词</view>
-		    <switch :checked="placeholderTextSelect" @change="placeholderTextChange"/>
-		  </view>
-		</view>
-        <view class="uni-padding-wrap uni-common-mt">
-            <view class="uni-btn-v">
-                <button class="uni-btn-v" type="default" @tap="modalTap">modal测试</button>
-            </view>
-			<text>{{exeRet}}</text>
-        </view>
-		
-    </view>
+		<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
 </template>
 <script lang="uts">
 	type ItemType = {
-	    value : string,
-	    name : string,
+		value : string,
+		name : string,
 	}
-    export default {
-        data() {
-            return {
-                title: 'modal',
-				showCancelSelect:false,
-				cancelTextSelect:false,
-				confirmTextSelect:false,
-				editableSelect:false,
-				placeholderTextSelect:false,
-				exeRet:"",
+	export default {
+		data() {
+			return {
+				title: 'modal',
+				showCancelSelect: false,
+				cancelTextSelect: false,
+				confirmTextSelect: false,
+				editableSelect: false,
+				placeholderTextSelect: false,
+				exeRet: "",
 				items: [{
-				    value: '标题',
-				    name: '有标题'
+					value: '标题',
+					name: '有标题'
 				},
 				{
-				    value: '',
-				    name: '无标题'
+					value: '',
+					name: '无标题'
 				},
 				{
-				    value: '超长标题测试内容，测试超过显示最大范围之后的样式-超长标题测试内容，测试超过显示最大范围之后的样式',
-				    name: '超长标题'
+					value: '超长标题测试内容，测试超过显示最大范围之后的样式-超长标题测试内容，测试超过显示最大范围之后的样式',
+					name: '超长标题'
 				}
 				] as ItemType[],
 				current: 0
-            }
-        },
-        methods: {
+			}
+		},
+		methods: {
 			showCancelChange: function (e : SwitchChangeEvent) {
 				this.showCancelSelect = e.detail.value
 			},
@@ -89,60 +96,56 @@
 				this.placeholderTextSelect = e.detail.value
 			},
 			radioChange(e : RadioGroupChangeEvent) {
-			    for (let i = 0; i < this.items.length; i++) {
-			        if (this.items[i].value === e.detail.value) {
-			            this.current = i;
-			            break;
-			        }
-			    }
+				for (let i = 0; i < this.items.length; i++) {
+					if (this.items[i].value === e.detail.value) {
+						this.current = i;
+						break;
+					}
+				}
 			},
-            modalTap: function () {
-				
-				let cancelTextVal:string
+			modalTap: function () {
+				let cancelTextVal : string
 				let cancelColorVal = ''
-				if(this.cancelTextSelect){
+				if (this.cancelTextSelect) {
 					cancelTextVal = "修改后的取消文本"
 					cancelColorVal = "#ff00ff"
-				}else{
+				} else {
 					cancelTextVal = "取消"
 				}
-				
+
 				let confirmTextVal = '确定'
 				let confirmColorVal = ''
-				if(this.confirmTextSelect){
+				if (this.confirmTextSelect) {
 					confirmTextVal = "修改后的确定文本"
 					confirmColorVal = "#00ffff"
 				}
-				
+
 				let placeholderTextVal = ''
 				let contentVal = "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内"
-				if(this.placeholderTextSelect){
+				if (this.placeholderTextSelect) {
 					placeholderTextVal = "定制提示信息"
 					contentVal = ""
 				}
-				
-				
-
 				uni.showModal({
-				    title: this.items[this.current].value,
-					editable:this.editableSelect,
-					placeholderText:placeholderTextVal,
-				    content: contentVal,
-				    showCancel: this.showCancelSelect,
-					cancelText:cancelTextVal,
-					cancelColor:cancelColorVal,
-					confirmText:confirmTextVal,
-					confirmColor:confirmColorVal,
-					success:function(res){
+					title: this.items[this.current].value,
+					editable: this.editableSelect,
+					placeholderText: placeholderTextVal,
+					content: contentVal,
+					showCancel: this.showCancelSelect,
+					cancelText: cancelTextVal,
+					cancelColor: cancelColorVal,
+					confirmText: confirmTextVal,
+					confirmColor: confirmColorVal,
+					success: function (res) {
 						this.exeRet = JSON.stringify(res)
 					},
-					fail:function(res){
+					fail: function (res) {
 						this.exeRet = JSON.stringify(res)
 					}
 				})
-                
-            }
-            
-        }
-    }
+
+			}
+
+		}
+	}
 </script>
\ No newline at end of file
diff --git a/pages/API/navigator/navigator.uvue b/pages/API/navigator/navigator.uvue
index 67d7afbffdd97a440709f1e9c697dd6adeaf73f5..bad361612e673be90705d30c55e53236889ed826 100644
--- a/pages/API/navigator/navigator.uvue
+++ b/pages/API/navigator/navigator.uvue
@@ -1,48 +1,56 @@
 <template>
-  <scroll-view>
-    <page-head title="navigate"></page-head>
-    <view class="uni-padding-wrap uni-common-mt uni-common-mb">
-      <view class="direction-row">
-        <text class="label">onLoad触发时间戳:</text>
-        <text>{{ onLoadTime }}</text>
-      </view>
-      <view class="direction-row">
-        <text class="label">onShow触发时间戳:</text>
-        <text>{{ onShowTime }}</text>
-      </view>
-      <view class="direction-row">
-        <text class="label">onReady触发时间戳:</text>
-        <text>{{ onReadyTime }}</text>
-      </view>
-      <view class="direction-row">
-        <text class="label">onHide触发时间戳:</text>
-        <text>{{ onHideTime }}</text>
-      </view>
-      <view class="direction-row">
-        <text class="label">onBackPress触发时间戳:</text>
-        <text>见控制台</text>
-      </view>
-      <view class="direction-row">
-        <text class="label">onUnload触发时间戳:</text>
-        <text>见控制台</text>
-      </view>
-      <view class="uni-btn-v">
-        <button @tap="navigateTo" class="uni-btn">
-          跳转新页面，并传递数据
-        </button>
-        <button @tap="navigateBack" class="uni-btn">返回上一页</button>
-        <button @tap="redirectTo" class="uni-btn">在当前页面打开</button>
-        <button @tap="switchTab" class="uni-btn">切换到模板选项卡</button>
-        <button @tap="reLaunch" class="uni-btn">关闭所有页面，打开首页</button>
-        <button @tap="customAnimation" class="uni-btn">
-          使用自定义动画打开页面
-        </button>
-        <button @tap="navigateToErrorPage" class="uni-btn">
-          打开不存在的页面
-        </button>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view>
+      <page-head title="navigate"></page-head>
+      <view class="uni-padding-wrap uni-common-mt uni-common-mb">
+        <view class="direction-row">
+          <text class="label">onLoad触发时间戳:</text>
+          <text>{{ onLoadTime }}</text>
+        </view>
+        <view class="direction-row">
+          <text class="label">onShow触发时间戳:</text>
+          <text>{{ onShowTime }}</text>
+        </view>
+        <view class="direction-row">
+          <text class="label">onReady触发时间戳:</text>
+          <text>{{ onReadyTime }}</text>
+        </view>
+        <view class="direction-row">
+          <text class="label">onHide触发时间戳:</text>
+          <text>{{ onHideTime }}</text>
+        </view>
+        <view class="direction-row">
+          <text class="label">onBackPress触发时间戳:</text>
+          <text>见控制台</text>
+        </view>
+        <view class="direction-row">
+          <text class="label">onUnload触发时间戳:</text>
+          <text>见控制台</text>
+        </view>
+        <view class="uni-btn-v">
+          <button @tap="navigateTo" class="uni-btn">
+            跳转新页面，并传递数据
+          </button>
+          <button @tap="navigateBack" class="uni-btn">返回上一页</button>
+          <button @tap="redirectTo" class="uni-btn">在当前页面打开</button>
+          <button @tap="switchTab" class="uni-btn">切换到模板选项卡</button>
+          <button @tap="reLaunch" class="uni-btn">
+            关闭所有页面，打开首页
+          </button>
+          <button @tap="customAnimation" class="uni-btn">
+            使用自定义动画打开页面
+          </button>
+          <button @tap="navigateToErrorPage" class="uni-btn">
+            打开不存在的页面
+          </button>
+        </view>
       </view>
     </view>
+    <!-- #ifdef APP -->
   </scroll-view>
+  <!-- #endif -->
 </template>
 
 <script lang="uts">
diff --git a/pages/API/navigator/new-page/new-page-2.uvue b/pages/API/navigator/new-page/new-page-2.uvue
index 58299e00c63d435c2ed8c78cb8d5d6ca138f6736..0c17f24331cda392984fc826d558a8424bcf80bd 100644
--- a/pages/API/navigator/new-page/new-page-2.uvue
+++ b/pages/API/navigator/new-page/new-page-2.uvue
@@ -1,10 +1,14 @@
 <template>
-  <scroll-view class="uni-padding-wrap">
-    <view class="container">
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view class="uni-padding-wrap container">
       <page-head title="new-page-2" />
       <button @click="scrollToBottom">scrollToBottom</button>
     </view>
+    <!-- #ifdef APP -->
   </scroll-view>
+  <!-- #endif -->
 </template>
 
 <script lang="uts">
diff --git a/pages/API/page-scroll-to/page-scroll-to.uvue b/pages/API/page-scroll-to/page-scroll-to.uvue
index 3a949c930e85c41d4e4b89e5e58b5f2ddb4313d9..912bcffb7f745cf132366db85c1e49c30b7e43aa 100644
--- a/pages/API/page-scroll-to/page-scroll-to.uvue
+++ b/pages/API/page-scroll-to/page-scroll-to.uvue
@@ -1,51 +1,65 @@
 <template>
-  <view class="uni-padding-wrap">
-    <page-head :title="title"></page-head>
-    <button type="default" class="btn-scrollTo" @click="scrollTo">scrollTo</button>
-    <button type="default" class="btn-scrollToElement" @click="scrollToElement">scrollToElement</button>
-    <view class="uni-list" v-for="(_, index) in 10" :key="index">
-      <view class="uni-list-cell list-item">{{ index }}</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view class="uni-padding-wrap">
+      <page-head :title="title"></page-head>
+      <button type="default" class="btn-scrollTo" @click="scrollTo">
+        scrollTo
+      </button>
+      <button
+        type="default"
+        class="btn-scrollToElement"
+        @click="scrollToElement"
+      >
+        scrollToElement
+      </button>
+      <view class="uni-list" v-for="(_, index) in 10" :key="index">
+        <view class="uni-list-cell list-item">{{ index }}</view>
+      </view>
+      <view class="custom-element">scrollTo-custom-element</view>
+      <view class="uni-list" v-for="(_, index2) in 10" :key="index2">
+        <view class="uni-list-cell list-item">{{ index2 }}</view>
+      </view>
     </view>
-    <view class="custom-element">scrollTo-custom-element</view>
-    <view class="uni-list" v-for="(_, index2) in 10" :key="index2">
-      <view class="uni-list-cell list-item">{{ index2 }}</view>
-    </view>
-  </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
 <script lang="ts">
-  export default {
-    data() {
-      return {
-        title: 'pageScrollTo'
-      }
-    },
-    methods: {
-      scrollTo() {
-        uni.pageScrollTo({
-          scrollTop: 100,
-          duration: 300,
-          success: () => {
-            console.log('success')
-          }
-        })
-      },
-      scrollToElement() {
-        uni.pageScrollTo({
-          selector: '.custom-element',
-          duration: 300,
-          success: () => {
-            console.log('success')
-          }
-        })
-      }
+export default {
+  data() {
+    return {
+      title: 'pageScrollTo',
     }
-  }
+  },
+  methods: {
+    scrollTo() {
+      uni.pageScrollTo({
+        scrollTop: 100,
+        duration: 300,
+        success: () => {
+          console.log('success')
+        },
+      })
+    },
+    scrollToElement() {
+      uni.pageScrollTo({
+        selector: '.custom-element',
+        duration: 300,
+        success: () => {
+          console.log('success')
+        },
+      })
+    },
+  },
+}
 </script>
 
 <style>
-  .list-item {
-    height: 100px;
-    padding-left: 30px;
-  }
-</style>
\ No newline at end of file
+.list-item {
+  height: 100px;
+  padding-left: 30px;
+}
+</style>
diff --git a/pages/API/preview-image/preview-image.uvue b/pages/API/preview-image/preview-image.uvue
index 64e0dd61ca219fed96ead1f26bb374f6e451ef18..69b1400d913666b0de78c618cc1416a0156016b2 100644
--- a/pages/API/preview-image/preview-image.uvue
+++ b/pages/API/preview-image/preview-image.uvue
@@ -1,111 +1,145 @@
 <template>
-	<view style="padding-left: 16rpx;padding-right: 16rpx;">
-		<view>
-			<text class="text-desc">图片指示器样式</text>
-			<radio-group class="cell-ct" style="background-color: white;" @change="onIndicatorChanged">
-				<view class="indicator-it" v-for="(item,index) in indicator" :key="item.value">
-					<radio :checked="index == 0" :value="item.value">{{item.name}}</radio>
-				</view>
-			</radio-group>
-		</view>
-		<view>
-			<checkbox-group @change="onCheckboxChange" style="margin-top: 32rpx;margin-bottom: 32rpx;margin-left: 16rpx;">
-				<checkbox :checked="isLoop" style="margin-right: 30rpx;">循环播放</checkbox>
-			</checkbox-group>
-		</view>
-		<view style="background-color: white;">
-			<text class="text-desc">点击图片开始预览</text>
-			<view class="cell-ct" style="background-color: #eeeeee; padding: 16rpx;">
-				<view class="cell cell-choose-image" v-for="(image,index) in imageList" :key="index">
-					<image style="width: 210rpx;height: 210rpx;" mode="aspectFit" :src="image" @click="previewImage(index)"></image>
-				</view>
-				<image class="cell cell-choose-image" src="/static/plus.png" @click="chooseImage">
-					<view></view>
-				</image>
-			</view>
-		</view>
-	</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view style="padding-left: 16rpx; padding-right: 16rpx">
+      <view>
+        <text class="text-desc">图片指示器样式</text>
+        <radio-group
+          class="cell-ct"
+          style="background-color: white"
+          @change="onIndicatorChanged"
+        >
+          <view
+            class="indicator-it"
+            v-for="(item, index) in indicator"
+            :key="item.value"
+          >
+            <radio :checked="index == 0" :value="item.value">{{
+              item.name
+            }}</radio>
+          </view>
+        </radio-group>
+      </view>
+      <view>
+        <checkbox-group
+          @change="onCheckboxChange"
+          style="margin-top: 32rpx; margin-bottom: 32rpx; margin-left: 16rpx"
+        >
+          <checkbox :checked="isLoop" style="margin-right: 30rpx"
+            >循环播放</checkbox
+          >
+        </checkbox-group>
+      </view>
+      <view style="background-color: white">
+        <text class="text-desc">点击图片开始预览</text>
+        <view class="cell-ct" style="background-color: #eeeeee; padding: 16rpx">
+          <view
+            class="cell cell-choose-image"
+            v-for="(image, index) in imageList"
+            :key="index"
+          >
+            <image
+              style="width: 210rpx; height: 210rpx"
+              mode="aspectFit"
+              :src="image"
+              @click="previewImage(index)"
+            ></image>
+          </view>
+          <image
+            class="cell cell-choose-image"
+            src="/static/plus.png"
+            @click="chooseImage"
+          >
+            <view></view>
+          </image>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
 <script>
-	type ItemType = {
-		value: string,
-		name: string
-	}
+type ItemType = {
+	value: string,
+	name: string
+}
 
-	export default {
-		data() {
-			return {
-				imageList: ["https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png", "/static/uni.png"],
-				indicator: [{
-					value: "default",
-					name: "圆点"
-				}, {
-					value: "number",
-					name: "数字"
-				}, {
-					value: "none",
-					name: "不显示"
-				}] as ItemType[],
-				currentIndicator: "default",
-				isLoop: true
-			}
+export default {
+	data() {
+		return {
+			imageList: ["https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png", "/static/uni.png"],
+			indicator: [{
+				value: "default",
+				name: "圆点"
+			}, {
+				value: "number",
+				name: "数字"
+			}, {
+				value: "none",
+				name: "不显示"
+			}] as ItemType[],
+			currentIndicator: "default",
+			isLoop: true
+		}
+	},
+	methods: {
+		previewImage(index: number) {
+			uni.previewImage({
+				urls: this.imageList,
+				current: index,
+				indicator: this.currentIndicator,
+				loop: this.isLoop
+			})
+		},
+		chooseImage() {
+			uni.chooseImage({
+				sourceType: ['album'],
+				success: (e) => {
+					this.imageList = this.imageList.concat(e.tempFilePaths)
+				},
+				fail(_) {
+				}
+			})
 		},
-		methods: {
-			previewImage(index: number) {
-				uni.previewImage({
-					urls: this.imageList,
-					current: index,
-					indicator: this.currentIndicator,
-					loop: this.isLoop
-				})
-			},
-			chooseImage() {
-				uni.chooseImage({
-					sourceType: ['album'],
-					success: (e) => {
-						this.imageList = this.imageList.concat(e.tempFilePaths)
-					},
-					fail(_) {
-					}
-				})
-			},
-			onIndicatorChanged(e: RadioGroupChangeEvent) {
-				this.currentIndicator = e.detail.value
-			},
-			onCheckboxChange(_: CheckboxGroupChangeEvent) {
-				this.isLoop = !this.isLoop
-			}
+		onIndicatorChanged(e: RadioGroupChangeEvent) {
+			this.currentIndicator = e.detail.value
+		},
+		onCheckboxChange(_: CheckboxGroupChangeEvent) {
+			this.isLoop = !this.isLoop
 		}
 	}
+}
 </script>
 
 <style>
-	.text-desc {
-		margin-top: 32rpx;
-		margin-left: 16rpx;
-		margin-bottom: 32rpx;
-		font-weight: bold;
-	}
+.text-desc {
+  margin-top: 32rpx;
+  margin-left: 16rpx;
+  margin-bottom: 32rpx;
+  font-weight: bold;
+}
 
-	.cell-ct {
-		display: flex;
-		flex-wrap: wrap;
-		flex-direction: row;
-	}
+.cell-ct {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
 
-	.cell {
-		margin-left: 14rpx;
-		width: 210rpx;
-		height: 210rpx;
-	}
+.cell {
+  margin-left: 14rpx;
+  width: 210rpx;
+  height: 210rpx;
+}
 
-	.cell-choose-image {
-		border-width: 1px;
-		border-color: lightgray;
-	}
+.cell-choose-image {
+  border-width: 1px;
+  border-color: lightgray;
+}
 
-	.indicator-it {
-		margin: 16rpx;
-	}
-</style>
\ No newline at end of file
+.indicator-it {
+  margin: 16rpx;
+}
+</style>
diff --git a/pages/API/storage/storage.uvue b/pages/API/storage/storage.uvue
index 974f490c53254a040fb68ecca7f5494969f55a07..884d0769051eb89ca3f7ac623c792bdbc50695b2 100644
--- a/pages/API/storage/storage.uvue
+++ b/pages/API/storage/storage.uvue
@@ -1,282 +1,340 @@
 <template>
-	<view>
-		<page-head :title="title"></page-head>
-		<view class="uni-common-mt">
-			<view class="uni-list">
-				<view class="uni-list-cell uni-list-cell-line">
-					<view class="uni-list-cell-left">
-						<view class="uni-label">key</view>
-					</view>
-					<view class="uni-list-cell-db">
-						<input class="uni-input" type="text" placeholder="请输入key" name="key" :value="key"
-							@input="keyChange" />
-					</view>
-				</view>
-				<view class="uni-list-cell">
-					<view class="uni-list-cell-left">
-						<view class="uni-label">value</view>
-					</view>
-					<view class="uni-list-cell-db">
-						<input class="uni-input" type="text" placeholder="请输入value" name="data" :value="data"
-							@input="dataChange" />
-					</view>
-				</view>
-			</view>
-			<view class="uni-padding-wrap">
-				
-				<view class="uni-btn-v">
-					<button class="uni-btn" type="primary" @tap="getStorageInfo">获取存储概述-同步</button>
-					<button class="uni-btn" @tap="getStorageInfoSync">获取存储概述-异步</button>
-				</view>
-				<text>{{storageInfo}}</text>
-				<view class="uni-flex uni-row">
-					<button type="default" style="-webkit-flex: 1;flex: 1;" @tap="strMock">填充字符串</button>
-					<button type="default" style="-webkit-flex: 1;flex: 1;" @tap="complexMock">填充复杂对象</button>
-				</view>
-				<view class="uni-flex uni-row">
-					<button type="default" style="-webkit-flex: 1;flex: 1;" @tap="numberMock">填充整型</button>
-					<button type="default" style="-webkit-flex: 1;flex: 1;" @tap="floatMock">填充浮点型</button>
-				</view>
-			</view>
-			<view class="uni-padding-wrap">
-				<view class="uni-btn-v">
-					<button type="primary" class="uni-btn btn-setstorage" @tap="setStorage">存储数据-异步</button>
-					<button class="uni-btn" @tap="getStorage">读取数据-异步</button>
-					<button class="uni-btn" @tap="removeStorage">移除数据-异步</button>
-					<button class="uni-btn" @tap="clearStorage">清理数据-异步</button>
-				</view>
-				
-				<view class="uni-btn-v">
-					<button type="primary" class="uni-btn btn-setstorage" @tap="setStorageSync">存储数据-同步</button>
-					<button class="uni-btn" @tap="getStorageSync">读取数据-同步</button>
-					<button class="uni-btn" @tap="removeStorageSync">移除数据-同步</button>
-					<button class="uni-btn" @tap="clearStorageSync">清理数据-同步</button>
-				</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view>
+      <page-head :title="title"></page-head>
+      <view class="uni-common-mt">
+        <view class="uni-list">
+          <view class="uni-list-cell uni-list-cell-line">
+            <view class="uni-list-cell-left">
+              <view class="uni-label">key</view>
+            </view>
+            <view class="uni-list-cell-db">
+              <input
+                class="uni-input"
+                type="text"
+                placeholder="请输入key"
+                name="key"
+                :value="key"
+                @input="keyChange"
+              />
+            </view>
+          </view>
+          <view class="uni-list-cell">
+            <view class="uni-list-cell-left">
+              <view class="uni-label">value</view>
+            </view>
+            <view class="uni-list-cell-db">
+              <input
+                class="uni-input"
+                type="text"
+                placeholder="请输入value"
+                name="data"
+                :value="data"
+                @input="dataChange"
+              />
+            </view>
+          </view>
+        </view>
+        <view class="uni-padding-wrap">
+          <view class="uni-btn-v">
+            <button class="uni-btn" type="primary" @tap="getStorageInfo">
+              获取存储概述-同步
+            </button>
+            <button class="uni-btn" @tap="getStorageInfoSync">
+              获取存储概述-异步
+            </button>
+          </view>
+          <text>{{ storageInfo }}</text>
+          <view class="uni-flex uni-row">
+            <button
+              type="default"
+              style="-webkit-flex: 1; flex: 1"
+              @tap="strMock"
+            >
+              填充字符串
+            </button>
+            <button
+              type="default"
+              style="-webkit-flex: 1; flex: 1"
+              @tap="complexMock"
+            >
+              填充复杂对象
+            </button>
+          </view>
+          <view class="uni-flex uni-row">
+            <button
+              type="default"
+              style="-webkit-flex: 1; flex: 1"
+              @tap="numberMock"
+            >
+              填充整型
+            </button>
+            <button
+              type="default"
+              style="-webkit-flex: 1; flex: 1"
+              @tap="floatMock"
+            >
+              填充浮点型
+            </button>
+          </view>
+        </view>
+        <view class="uni-padding-wrap">
+          <view class="uni-btn-v">
+            <button
+              type="primary"
+              class="uni-btn btn-setstorage"
+              @tap="setStorage"
+            >
+              存储数据-异步
+            </button>
+            <button class="uni-btn" @tap="getStorage">读取数据-异步</button>
+            <button class="uni-btn" @tap="removeStorage">移除数据-异步</button>
+            <button class="uni-btn" @tap="clearStorage">清理数据-异步</button>
+          </view>
 
-
-			</view>
-		</view>
-	</view>
+          <view class="uni-btn-v">
+            <button
+              type="primary"
+              class="uni-btn btn-setstorage"
+              @tap="setStorageSync"
+            >
+              存储数据-同步
+            </button>
+            <button class="uni-btn" @tap="getStorageSync">读取数据-同步</button>
+            <button class="uni-btn" @tap="removeStorageSync">
+              移除数据-同步
+            </button>
+            <button class="uni-btn" @tap="clearStorageSync">
+              清理数据-同步
+            </button>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 <script lang="ts">
-	export default {
-		data() {
-			return {
-				title: 'get/set/clearStorage',
-				key: '',
-				data: '' as any,
-				storageInfo: ''
-			}
-		},
-		methods: {
-			getStorageInfo(){
-				uni.getStorageInfo({
-					success: function (res) {
-						this.storageInfo = JSON.stringify(res)
-					}
-				});
-			},
-			getStorageInfoSync(){
-				try {
-					const res = uni.getStorageInfoSync();
-					this.storageInfo = JSON.stringify(res)
-				} catch (e) {
-					// error
-					console.log(e)
-				}
-
-			},
-			strMock() {
-				this.key = "key_" + Math.random();
-				this.data = "测试字符串数据，长度为16个字符"
-			},
-			complexMock() {
-				this.key = "key_" + Math.random();
-				let jsonObj = {
-					'name': '张三',
-					'age': 12,
-					'classMate': [{
-						'id': 1001,
-						'name': '李四'
-					}, {
-						'id': 1002,
-						'name': 'jack ma'
-					}]
-				}
-				this.data = jsonObj
-			},
-			numberMock() {
-				this.key = "key_" + Math.random();
-				this.data = 10011
-			},
-			floatMock() {
-				this.key = "key_" + Math.random();
-				this.data = 3.1415926535893384626
-			},
+export default {
+  data() {
+    return {
+      title: 'get/set/clearStorage',
+      key: '',
+      data: '' as any,
+      storageInfo: '',
+    }
+  },
+  methods: {
+    getStorageInfo() {
+      uni.getStorageInfo({
+        success: function (res) {
+          this.storageInfo = JSON.stringify(res)
+        },
+      })
+    },
+    getStorageInfoSync() {
+      try {
+        const res = uni.getStorageInfoSync()
+        this.storageInfo = JSON.stringify(res)
+      } catch (e) {
+        // error
+        console.log(e)
+      }
+    },
+    strMock() {
+      this.key = 'key_' + Math.random()
+      this.data = '测试字符串数据，长度为16个字符'
+    },
+    complexMock() {
+      this.key = 'key_' + Math.random()
+      let jsonObj = {
+        name: '张三',
+        age: 12,
+        classMate: [
+          {
+            id: 1001,
+            name: '李四',
+          },
+          {
+            id: 1002,
+            name: 'jack ma',
+          },
+        ],
+      }
+      this.data = jsonObj
+    },
+    numberMock() {
+      this.key = 'key_' + Math.random()
+      this.data = 10011
+    },
+    floatMock() {
+      this.key = 'key_' + Math.random()
+      this.data = 3.1415926535893384626
+    },
 
-			keyChange: function (e : InputEvent) {
-				this.key = e.detail.value
-			},
-			dataChange: function (e : InputEvent) {
-				this.data = e.detail.value
-			},
-			getStorage: function () {
-				var key = this.key;
-				if (key.length == 0) {
-					uni.showModal({
-						title: '读取数据失败',
-						content: "key 不能为空",
-						showCancel: false
-					})
-				} else {
-					uni.getStorage({
-						key: key,
-						success: (res) => {
-							uni.showModal({
-								title: '读取数据成功',
-								content: "data: '" + res.data + "'",
-								showCancel: false
-							})
-						},
-						fail: () => {
-							uni.showModal({
-								title: '读取数据失败',
-								content: "找不到 key 对应的数据",
-								showCancel: false
-							})
-						}
-					})
-				}
-			},
-			getStorageSync: function () {
-				var key = this.key;
-				if (key.length == 0) {
-					uni.showModal({
-						title: '读取数据失败',
-						content: "key 不能为空",
-						showCancel: false
-					})
-				} else {
-					let ret = uni.getStorageSync(key)
-					uni.showModal({
-						title: '读取数据成功',
-						content: "data: '" + ret + "'",
-						showCancel: false
-					})
-				}
-			},
-			setStorage: function () {
-				var key = this.key
-				var data = this.data
-				if (key.length == 0) {
-					uni.showModal({
-						title: '保存数据失败',
-						content: 'key 不能为空',
-						showCancel: false
-					})
-				} else {
-					uni.setStorage({
-						key: key,
-						data: data,
-						success: () => {
-							uni.showModal({
-								title: '存储数据成功',
-								showCancel: false
-							})
-						},
-						fail: () => {
-							uni.showModal({
-								title: '储存数据失败!',
-								showCancel: false
-							})
-						}
-					})
-				}
-			},
-			setStorageSync: function () {
-				var key = this.key
-				var data = this.data
-				if (key.length == 0) {
-					uni.showModal({
-						title: '保存数据失败',
-						content: 'key 不能为空',
-						showCancel: false
-					})
-				} else {
-					uni.setStorageSync(key,data)
-					uni.showModal({
-						title: '存储数据成功',
-						showCancel: false
-					})
-				}
-			},
-			removeStorage: function () {
-				uni.removeStorage({
-					key:this.key,
-					success: () => {
-						uni.showModal({
-							title: '移除数据成功',
-							showCancel: false
-						})
-					},
-					fail: () => {
-						uni.showModal({
-							title: '移除数据失败',
-							showCancel: false
-						})
-					}
-				})
-				
-			},
-			removeStorageSync: function () {
-				uni.removeStorageSync(this.key)
-				uni.showModal({
-					title: '移除数据成功',
-					showCancel: false
-				})
-				
-			},
-			clearStorage: function () {
-				this.key = ''
-				this.data = ''
-				uni.clearStorage({
-					success:function(_){
-						uni.showModal({
-							title: '清除数据成功',
-							showCancel: false
-						})
-					},
-					fail:function(_){
-						uni.showModal({
-							title: '清除数据失败',
-							showCancel: false
-						})
-					},
-				})
-				
-			},
-			clearStorageSync: function () {
-				this.key = ''
-				this.data = ''
-				uni.clearStorageSync()
-				uni.showModal({
-					title: '清除数据成功',
-					content: ' ',
-					showCancel: false
-				})
-			}
-		}
-	}
+    keyChange: function (e: InputEvent) {
+      this.key = e.detail.value
+    },
+    dataChange: function (e: InputEvent) {
+      this.data = e.detail.value
+    },
+    getStorage: function () {
+      var key = this.key
+      if (key.length == 0) {
+        uni.showModal({
+          title: '读取数据失败',
+          content: 'key 不能为空',
+          showCancel: false,
+        })
+      } else {
+        uni.getStorage({
+          key: key,
+          success: (res) => {
+            uni.showModal({
+              title: '读取数据成功',
+              content: "data: '" + res.data + "'",
+              showCancel: false,
+            })
+          },
+          fail: () => {
+            uni.showModal({
+              title: '读取数据失败',
+              content: '找不到 key 对应的数据',
+              showCancel: false,
+            })
+          },
+        })
+      }
+    },
+    getStorageSync: function () {
+      var key = this.key
+      if (key.length == 0) {
+        uni.showModal({
+          title: '读取数据失败',
+          content: 'key 不能为空',
+          showCancel: false,
+        })
+      } else {
+        let ret = uni.getStorageSync(key)
+        uni.showModal({
+          title: '读取数据成功',
+          content: "data: '" + ret + "'",
+          showCancel: false,
+        })
+      }
+    },
+    setStorage: function () {
+      var key = this.key
+      var data = this.data
+      if (key.length == 0) {
+        uni.showModal({
+          title: '保存数据失败',
+          content: 'key 不能为空',
+          showCancel: false,
+        })
+      } else {
+        uni.setStorage({
+          key: key,
+          data: data,
+          success: () => {
+            uni.showModal({
+              title: '存储数据成功',
+              showCancel: false,
+            })
+          },
+          fail: () => {
+            uni.showModal({
+              title: '储存数据失败!',
+              showCancel: false,
+            })
+          },
+        })
+      }
+    },
+    setStorageSync: function () {
+      var key = this.key
+      var data = this.data
+      if (key.length == 0) {
+        uni.showModal({
+          title: '保存数据失败',
+          content: 'key 不能为空',
+          showCancel: false,
+        })
+      } else {
+        uni.setStorageSync(key, data)
+        uni.showModal({
+          title: '存储数据成功',
+          showCancel: false,
+        })
+      }
+    },
+    removeStorage: function () {
+      uni.removeStorage({
+        key: this.key,
+        success: () => {
+          uni.showModal({
+            title: '移除数据成功',
+            showCancel: false,
+          })
+        },
+        fail: () => {
+          uni.showModal({
+            title: '移除数据失败',
+            showCancel: false,
+          })
+        },
+      })
+    },
+    removeStorageSync: function () {
+      uni.removeStorageSync(this.key)
+      uni.showModal({
+        title: '移除数据成功',
+        showCancel: false,
+      })
+    },
+    clearStorage: function () {
+      this.key = ''
+      this.data = ''
+      uni.clearStorage({
+        success: function (_) {
+          uni.showModal({
+            title: '清除数据成功',
+            showCancel: false,
+          })
+        },
+        fail: function (_) {
+          uni.showModal({
+            title: '清除数据失败',
+            showCancel: false,
+          })
+        },
+      })
+    },
+    clearStorageSync: function () {
+      this.key = ''
+      this.data = ''
+      uni.clearStorageSync()
+      uni.showModal({
+        title: '清除数据成功',
+        content: ' ',
+        showCancel: false,
+      })
+    },
+  },
+}
 </script>
 
 <style>
-	.btn-setstorage {
-		background-color: #007aff;
-		color: #ffffff;
-	}
+.btn-setstorage {
+  background-color: #007aff;
+  color: #ffffff;
+}
 
-	.button-sp-area {
-		flex-direction: row;
-		margin: 0 auto;
-	}
-</style>
\ No newline at end of file
+.button-sp-area {
+  flex-direction: row;
+  margin: 0 auto;
+}
+</style>
diff --git a/pages/API/upload-file/upload-file.uvue b/pages/API/upload-file/upload-file.uvue
index edcb14d31045a3a0256fc5f917f8de9091c590e5..9df35c459dea4cd1e695ded48fbced4a5c90022a 100644
--- a/pages/API/upload-file/upload-file.uvue
+++ b/pages/API/upload-file/upload-file.uvue
@@ -1,105 +1,118 @@
 <template>
-	<view>
-		<page-head :title="title"></page-head>
-		<view class="uni-padding-wrap uni-common-mt">
-			<view class="demo">
-				<image v-if="imageSrc" :src="imageSrc" class="image" mode="widthFix"></image>
-				<view v-else class="uni-hello-addfile" @click="chooseImage">+ 选择图片</view>
-			</view>
-		</view>
-	</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view>
+      <page-head :title="title"></page-head>
+      <view class="uni-padding-wrap uni-common-mt">
+        <view class="demo">
+          <image
+            v-if="imageSrc"
+            :src="imageSrc"
+            class="image"
+            mode="widthFix"
+          ></image>
+          <view v-else class="uni-hello-addfile" @click="chooseImage"
+            >+ 选择图片</view
+          >
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 <script>
-	import UploadTask from 'uts.sdk.modules.DCloudUniNetwork.UploadTask';
-	export default {
-		data() {
-			return {
-				title: 'uploadFile',
-				imageSrc: '',
-				task: null as UploadTask | null,
-				pageVisible: false
-			}
-		},
-		onLoad() {
-			this.pageVisible = true;
-		},
-		onUnload() {
-			this.imageSrc = '';
-			this.pageVisible = false;
-			uni.hideLoading();
-			this.task?.abort();
-		},
-		methods: {
-			chooseImage: function() {
-				uni.chooseImage({
-					count: 1,
-					sizeType: ['compressed'],
-					sourceType: ['album'],
-					success: (res) => {
-						console.log('chooseImage success, temp path is', res.tempFilePaths[0])
-						var imageSrc = res.tempFilePaths[0]
-						uni.showLoading({
-							title: '上传中'
-						})
-						this.task = uni.uploadFile({
-							url: 'https://unidemo.dcloud.net.cn/upload', //仅为示例，非真实的接口地址
-							filePath: imageSrc,
-							name: 'file',
-							formData: {
-								'user': 'test'
-							},
-							success: (res) => {
-								if (this.pageVisible) {
-									console.log('uploadImage success, res is:', res)
-									uni.hideLoading();
-									uni.showToast({
-										title: '上传成功',
-										icon: 'success',
-										duration: 1000
-									})
-									this.imageSrc = imageSrc
-								}
-							},
-							fail: (err) => {
-								if (this.pageVisible) {
-									console.log('uploadImage fail', err);
-									uni.hideLoading();
-									uni.showModal({
-										content: err.errMsg,
-										showCancel: false
-									});
-								}
-							},
-						});
-					},
-					fail: (err) => {
-						console.log('chooseImage fail', err)
-					}
-				})
-			}
+import UploadTask from 'uts.sdk.modules.DCloudUniNetwork.UploadTask';
+export default {
+	data() {
+		return {
+			title: 'uploadFile',
+			imageSrc: '',
+			task: null as UploadTask | null,
+			pageVisible: false
+		}
+	},
+	onLoad() {
+		this.pageVisible = true;
+	},
+	onUnload() {
+		this.imageSrc = '';
+		this.pageVisible = false;
+		uni.hideLoading();
+		this.task?.abort();
+	},
+	methods: {
+		chooseImage: function() {
+			uni.chooseImage({
+				count: 1,
+				sizeType: ['compressed'],
+				sourceType: ['album'],
+				success: (res) => {
+					console.log('chooseImage success, temp path is', res.tempFilePaths[0])
+					var imageSrc = res.tempFilePaths[0]
+					uni.showLoading({
+						title: '上传中'
+					})
+					this.task = uni.uploadFile({
+						url: 'https://unidemo.dcloud.net.cn/upload', //仅为示例，非真实的接口地址
+						filePath: imageSrc,
+						name: 'file',
+						formData: {
+							'user': 'test'
+						},
+						success: (res) => {
+							if (this.pageVisible) {
+								console.log('uploadImage success, res is:', res)
+								uni.hideLoading();
+								uni.showToast({
+									title: '上传成功',
+									icon: 'success',
+									duration: 1000
+								})
+								this.imageSrc = imageSrc
+							}
+						},
+						fail: (err) => {
+							if (this.pageVisible) {
+								console.log('uploadImage fail', err);
+								uni.hideLoading();
+								uni.showModal({
+									content: err.errMsg,
+									showCancel: false
+								});
+							}
+						},
+					});
+				},
+				fail: (err) => {
+					console.log('chooseImage fail', err)
+				}
+			})
 		}
 	}
+}
 </script>
 
 <style>
-	.image {
-		width: 100%;
-	}
+.image {
+  width: 100%;
+}
 
-	.demo {
-		background: #FFF;
-		padding: 50rpx;
-		justify-content: center;
-		align-items: center;
-	}
+.demo {
+  background: #fff;
+  padding: 50rpx;
+  justify-content: center;
+  align-items: center;
+}
 
-	.uni-hello-addfile {
-		text-align: center;
-		line-height: 300rpx;
-		background: #FFF;
-		padding: 50rpx;
-		margin-top: 10px;
-		font-size: 38rpx;
-		color: #808080;
-	}
-</style>
\ No newline at end of file
+.uni-hello-addfile {
+  text-align: center;
+  line-height: 300rpx;
+  background: #fff;
+  padding: 50rpx;
+  margin-top: 10px;
+  font-size: 38rpx;
+  color: #808080;
+}
+</style>
diff --git a/pages/CSS/background/background-color.uvue b/pages/CSS/background/background-color.uvue
index 36c63c44f188583891831a932f8a98d24ba86851..d320cd2d287f54c62f7c677a1c6bbd8e14b4677a 100644
--- a/pages/CSS/background/background-color.uvue
+++ b/pages/CSS/background/background-color.uvue
@@ -1,39 +1,44 @@
 <template>
-	<view style="flex-grow: 1;">
-		<view>
-			<text>background-color: red</text>
-			<view class="common" style="background-color: red;"></view>
-		</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view style="flex-grow: 1">
+      <view>
+        <text>background-color: red</text>
+        <view class="common" style="background-color: red"></view>
+      </view>
 
-		<view>
-			<text>background-color: #ff0000</text>
-			<view class="common" style="background-color: #ff0000;"></view>
-		</view>
-		
-		<view>
-			<text>background-color: #f00</text>
-			<view class="common" style="background-color: #f00;"></view>
-		</view>
+      <view>
+        <text>background-color: #ff0000</text>
+        <view class="common" style="background-color: #ff0000"></view>
+      </view>
 
-		<view>
-			<text>background-color: rgb(255, 0, 0)</text>
-			<view class="common" style="background-color: rgb(255, 0, 0);"></view>
-		</view>
-		
-		<view>
-			<text>background-color: rgba(255, 0, 0, 0.5)</text>
-			<view class="common" style="background-color: rgba(255, 0, 0, 0.5);"></view>
-		</view>
-	</view>
-</template>
+      <view>
+        <text>background-color: #f00</text>
+        <view class="common" style="background-color: #f00"></view>
+      </view>
 
-<script>
+      <view>
+        <text>background-color: rgb(255, 0, 0)</text>
+        <view class="common" style="background-color: rgb(255, 0, 0)"></view>
+      </view>
 
-</script>
+      <view>
+        <text>background-color: rgba(255, 0, 0, 0.5)</text>
+        <view
+          class="common"
+          style="background-color: rgba(255, 0, 0, 0.5)"
+        ></view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
 
 <style>
-	.common {
-		width: 500rpx;
-		height: 500rpx;
-	}
-</style>
\ No newline at end of file
+.common {
+  width: 500rpx;
+  height: 500rpx;
+}
+</style>
diff --git a/pages/CSS/border/border-color.uvue b/pages/CSS/border/border-color.uvue
index ae03864d8049dd1aa6b987d1b74a0d86d8991d66..31a7392d96b6ce7c2432a6cf7b9be8fbe74142b5 100644
--- a/pages/CSS/border/border-color.uvue
+++ b/pages/CSS/border/border-color.uvue
@@ -1,40 +1,57 @@
 <template>
-	<view style="flex-grow: 1;">
-		<view>
-			<text>border-color: red</text>
-			<view class="common" style="border-width: 10rpx;border-color: red;"></view>
-		</view>
-		
-		<view>
-			<text>border-left-color: red</text>
-			<view class="common" style="border-left-width: 10rpx;border-left-color: red;"></view>
-		</view>
-		
-		<view>
-			<text>border-top-color: green</text>
-			<view class="common" style="border-top-width: 10rpx;border-top-color: green;"></view>
-		</view>
-		
-		<view>
-			<text>border-right-color: yellow</text>
-			<view class="common" style="border-right-width: 10rpx;border-right-color: yellow;"></view>
-		</view>
-		
-		<view>
-			<text>border-bottom-color: blue</text>
-			<view class="common" style="border-bottom-width: 10rpx;border-bottom-color: blue;"></view>
-		</view>
-	</view>
-</template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view style="flex-grow: 1">
+      <view>
+        <text>border-color: red</text>
+        <view
+          class="common"
+          style="border-width: 10rpx; border-color: red"
+        ></view>
+      </view>
+
+      <view>
+        <text>border-left-color: red</text>
+        <view
+          class="common"
+          style="border-left-width: 10rpx; border-left-color: red"
+        ></view>
+      </view>
 
-<script>
+      <view>
+        <text>border-top-color: green</text>
+        <view
+          class="common"
+          style="border-top-width: 10rpx; border-top-color: green"
+        ></view>
+      </view>
 
-</script>
+      <view>
+        <text>border-right-color: yellow</text>
+        <view
+          class="common"
+          style="border-right-width: 10rpx; border-right-color: yellow"
+        ></view>
+      </view>
+
+      <view>
+        <text>border-bottom-color: blue</text>
+        <view
+          class="common"
+          style="border-bottom-width: 10rpx; border-bottom-color: blue"
+        ></view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
 
 <style>
-	.common {
-		width: 500rpx;
-		height: 500rpx;
-		background-color: gray;
-	}
-</style>
\ No newline at end of file
+.common {
+  width: 500rpx;
+  height: 500rpx;
+  background-color: gray;
+}
+</style>
diff --git a/pages/CSS/border/border-radius.uvue b/pages/CSS/border/border-radius.uvue
index 35447a38abfd9f8e7713aeda333f467cf7b116c3..e18738d2c0ceefb27063eddcc0c3264dab3efcae 100644
--- a/pages/CSS/border/border-radius.uvue
+++ b/pages/CSS/border/border-radius.uvue
@@ -1,40 +1,42 @@
 <template>
-	<view style="flex-grow: 1;">
-		<view>
-			<text>border-radius: 20rpx</text>
-			<view class="common" style="border-radius: 20rpx;"></view>
-		</view>
-		
-		<view>
-			<text>border-top-left-radius: 20rpx</text>
-			<view class="common" style="border-top-left-radius: 20rpx;"></view>
-		</view>
-		
-		<view>
-			<text>border-top-right-radius: 20rpx</text>
-			<view class="common" style="border-top-right-radius: 20rpx;"></view>
-		</view>
-		
-		<view>
-			<text>border-bottom-left-radius: 20rpx</text>
-			<view class="common" style="border-bottom-left-radius: 20rpx;"></view>
-		</view>
-		
-		<view>
-			<text>border-bottom-right-radius: 20rpx</text>
-			<view class="common" style="border-bottom-right-radius: 20rpx;"></view>
-		</view>
-	</view>
-</template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view style="flex-grow: 1">
+      <view>
+        <text>border-radius: 20rpx</text>
+        <view class="common" style="border-radius: 20rpx"></view>
+      </view>
+
+      <view>
+        <text>border-top-left-radius: 20rpx</text>
+        <view class="common" style="border-top-left-radius: 20rpx"></view>
+      </view>
 
-<script>
+      <view>
+        <text>border-top-right-radius: 20rpx</text>
+        <view class="common" style="border-top-right-radius: 20rpx"></view>
+      </view>
 
-</script>
+      <view>
+        <text>border-bottom-left-radius: 20rpx</text>
+        <view class="common" style="border-bottom-left-radius: 20rpx"></view>
+      </view>
+
+      <view>
+        <text>border-bottom-right-radius: 20rpx</text>
+        <view class="common" style="border-bottom-right-radius: 20rpx"></view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
 
 <style>
-	.common {
-		width: 500rpx;
-		height: 500rpx;
-		background-color: gray;
-	}
-</style>
\ No newline at end of file
+.common {
+  width: 500rpx;
+  height: 500rpx;
+  background-color: gray;
+}
+</style>
diff --git a/pages/CSS/border/border-style.uvue b/pages/CSS/border/border-style.uvue
index 6420c8506e5ee88bce061cc863d22207595dcae5..b3fb8536fb4940011f6873eab1a9cc98c0422b95 100644
--- a/pages/CSS/border/border-style.uvue
+++ b/pages/CSS/border/border-style.uvue
@@ -1,40 +1,57 @@
 <template>
-	<view style="flex-grow: 1;">
-		<view>
-			<text>border-style: dashed</text>
-			<view class="common" style="border-width: 10rpx;border-style: dashed;"></view>
-		</view>
-		
-		<view>
-			<text>border-left-style: dashed</text>
-			<view class="common" style="border-left-width: 10rpx;border-left-style: dashed;"></view>
-		</view>
-		
-		<view>
-			<text>border-top-style: dashed</text>
-			<view class="common" style="border-top-width: 10rpx;border-top-style: dashed;"></view>
-		</view>
-		
-		<view>
-			<text>border-right-style: dotted</text>
-			<view class="common" style="border-right-width: 10rpx;border-right-style: dotted;"></view>
-		</view>
-		
-		<view>
-			<text>border-bottom-style: dotted</text>
-			<view class="common" style="border-bottom-width: 10rpx;border-bottom-style: dotted;"></view>
-		</view>
-	</view>
-</template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view style="flex-grow: 1">
+      <view>
+        <text>border-style: dashed</text>
+        <view
+          class="common"
+          style="border-width: 10rpx; border-style: dashed"
+        ></view>
+      </view>
+
+      <view>
+        <text>border-left-style: dashed</text>
+        <view
+          class="common"
+          style="border-left-width: 10rpx; border-left-style: dashed"
+        ></view>
+      </view>
 
-<script>
+      <view>
+        <text>border-top-style: dashed</text>
+        <view
+          class="common"
+          style="border-top-width: 10rpx; border-top-style: dashed"
+        ></view>
+      </view>
 
-</script>
+      <view>
+        <text>border-right-style: dotted</text>
+        <view
+          class="common"
+          style="border-right-width: 10rpx; border-right-style: dotted"
+        ></view>
+      </view>
+
+      <view>
+        <text>border-bottom-style: dotted</text>
+        <view
+          class="common"
+          style="border-bottom-width: 10rpx; border-bottom-style: dotted"
+        ></view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
 
 <style>
-	.common {
-		width: 500rpx;
-		height: 500rpx;
-		background-color: gray;
-	}
-</style>
\ No newline at end of file
+.common {
+  width: 500rpx;
+  height: 500rpx;
+  background-color: gray;
+}
+</style>
diff --git a/pages/CSS/border/border-width.uvue b/pages/CSS/border/border-width.uvue
index 40005a134bb0cd75f36ab774f226d0398c8093dc..1de2a19d70af4ef4f8b0c26f762a5b8c1ea3f2f5 100644
--- a/pages/CSS/border/border-width.uvue
+++ b/pages/CSS/border/border-width.uvue
@@ -1,40 +1,42 @@
 <template>
-	<view style="flex-grow: 1;">
-		<view>
-			<text>border-width: 10rpx</text>
-			<view class="common" style="border-width: 10rpx;"></view>
-		</view>
-		
-		<view>
-			<text>border-left-width: 10rpx</text>
-			<view class="common" style="border-left-width: 10rpx;"></view>
-		</view>
-		
-		<view>
-			<text>border-top-width: 20rpx</text>
-			<view class="common" style="border-top-width: 20rpx;"></view>
-		</view>
-		
-		<view>
-			<text>border-right-width: 30rpx</text>
-			<view class="common" style="border-right-width: 30rpx;"></view>
-		</view>
-		
-		<view>
-			<text>border-bottom-width: 40rpx</text>
-			<view class="common" style="border-bottom-width: 40rpx;"></view>
-		</view>	
-	</view>
-</template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view style="flex-grow: 1">
+      <view>
+        <text>border-width: 10rpx</text>
+        <view class="common" style="border-width: 10rpx"></view>
+      </view>
+
+      <view>
+        <text>border-left-width: 10rpx</text>
+        <view class="common" style="border-left-width: 10rpx"></view>
+      </view>
 
-<script>
+      <view>
+        <text>border-top-width: 20rpx</text>
+        <view class="common" style="border-top-width: 20rpx"></view>
+      </view>
 
-</script>
+      <view>
+        <text>border-right-width: 30rpx</text>
+        <view class="common" style="border-right-width: 30rpx"></view>
+      </view>
+
+      <view>
+        <text>border-bottom-width: 40rpx</text>
+        <view class="common" style="border-bottom-width: 40rpx"></view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
 
 <style>
-	.common {
-		width: 500rpx;
-		height: 500rpx;
-		background-color: gray;
-	}
-</style>
\ No newline at end of file
+.common {
+  width: 500rpx;
+  height: 500rpx;
+  background-color: gray;
+}
+</style>
diff --git a/pages/CSS/box-shadow/box-shadow.uvue b/pages/CSS/box-shadow/box-shadow.uvue
index 1bd18e9ec53623ac5c75b1b606a13bce9eb9dee3..1448eecae5cfe503bf5d9a22d14e3dd113f70861 100644
--- a/pages/CSS/box-shadow/box-shadow.uvue
+++ b/pages/CSS/box-shadow/box-shadow.uvue
@@ -1,144 +1,180 @@
 <template>
-	<view style="flex-grow: 1;">
-		<view>
-			<text>box-shadow: 5px 5px black</text>
-			<view class="backgroundview">
-				<view class="common" style="box-shadow: 5px 5px black;"></view>
-			</view>
-		</view>
-
-		<view>
-			<text>box-shadow: 5px 5px 5px black</text>
-			<view class="backgroundview">
-				<view class="common" style="box-shadow: 5px 5px 5px black;"></view>
-			</view>
-		</view>
-
-		<view>
-			<text>box-shadow: 5px 10px 5px black</text>
-			<view class="backgroundview">
-				<view class="common" style="box-shadow: 5px 10px 5px black;"></view>
-			</view>
-		</view>
-
-		<view>
-			<text>box-shadow: 5px 5px 5px 5px black</text>
-			<view class="backgroundview">
-				<view class="common" style="box-shadow: 5px 5px 5px 5px black;"></view>
-			</view>
-		</view>
-
-		<view>
-			<text>box-shadow: -5px -5px 5px black</text>
-			<view class="backgroundview">
-				<view class="common" style="box-shadow: -5px -5px 5px black;"></view>
-			</view>
-		</view>
-
-		<view>
-			<text>box-shadow: inset 5px 5px black</text>
-			<view class="backgroundview">
-				<view class="common" style="box-shadow: inset 5px 5px black;"></view>
-			</view>
-		</view>
-
-		<view>
-			<text>box-shadow: inset 5px 5px 5px black</text>
-			<view class="backgroundview">
-				<view class="common" style="box-shadow: inset 5px 5px 5px black;"></view>
-			</view>
-		</view>
-
-		<view>
-			<text>box-shadow: inset 5px 10px 5px black</text>
-			<view class="backgroundview">
-				<view class="common" style="box-shadow: inset 5px 10px 5px black;"></view>
-			</view>
-		</view>
-
-		<view>
-			<text>box-shadow: inset 5px 5px 5px 5px black</text>
-			<view class="backgroundview">
-				<view class="common" style="box-shadow: inset 5px 5px 5px 5px black;"></view>
-			</view>
-		</view>
-
-		<view>
-			<text>box-shadow: inset -5px -5px 5px black</text>
-			<view class="backgroundview">
-				<view class="common" style="box-shadow: inset -5px -5px 5px black;"></view>
-			</view>
-		</view>
-
-		<view>
-			<text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
-			<view class="backgroundview">
-				<view class="common" style="box-shadow: 0px 1px 3px rgba(0,0,0,0.4);"></view>
-			</view>
-		</view>
-
-		<view>
-			<text>circle: box-shadow: 5px 5px black</text>
-			<view class="backgroundview">
-				<view class="common" style="border-radius: 125rpx;box-shadow: 5px 5px black"></view>
-			</view>
-		</view>
-
-
-		<view>
-			<text>circle: box-shadow: 5px 5px 5px black</text>
-			<view class="backgroundview">
-				<view class="common" style="border-radius: 125rpx;box-shadow: 5px 5px 5px black;"></view>
-			</view>
-		</view>
-
-		<view>
-			<text>circle: box-shadow: 5px 10px 5px black</text>
-			<view class="backgroundview">
-				<view class="common" style="border-radius: 125rpx;box-shadow: 5px 10px 5px black;"></view>
-			</view>
-		</view>
-
-		<view>
-			<text>circle: box-shadow: 5px 5px 5px 5px black</text>
-			<view class="backgroundview">
-				<view class="common" style="border-radius: 125rpx;box-shadow: 5px 5px 5px 5px black;"></view>
-			</view>
-		</view>
-
-		<view>
-			<text>circle: box-shadow: -5px -5px 5px black</text>
-			<view class="backgroundview">
-				<view class="common" style="border-radius: 125rpx;box-shadow: -5px -5px 5px black;"></view>
-			</view>
-		</view>
-
-		<view>
-			<text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
-			<view class="backgroundview">
-				<view class="common" style="border-radius: 125rpx;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);"></view>
-			</view>
-		</view>
-
-	</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view style="flex-grow: 1">
+      <view>
+        <text>box-shadow: 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: 5px 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: 5px 10px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: 5px 10px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: 5px 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: 5px 5px 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: -5px -5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: -5px -5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: inset 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: inset 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: inset 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view
+            class="common"
+            style="box-shadow: inset 5px 5px 5px black"
+          ></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: inset 5px 10px 5px black</text>
+        <view class="backgroundview">
+          <view
+            class="common"
+            style="box-shadow: inset 5px 10px 5px black"
+          ></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: inset 5px 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view
+            class="common"
+            style="box-shadow: inset 5px 5px 5px 5px black"
+          ></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: inset -5px -5px 5px black</text>
+        <view class="backgroundview">
+          <view
+            class="common"
+            style="box-shadow: inset -5px -5px 5px black"
+          ></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
+        <view class="backgroundview">
+          <view
+            class="common"
+            style="box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)"
+          ></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: 5px 5px black</text>
+        <view class="backgroundview">
+          <view
+            class="common"
+            style="border-radius: 125rpx; box-shadow: 5px 5px black"
+          ></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view
+            class="common"
+            style="border-radius: 125rpx; box-shadow: 5px 5px 5px black"
+          ></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: 5px 10px 5px black</text>
+        <view class="backgroundview">
+          <view
+            class="common"
+            style="border-radius: 125rpx; box-shadow: 5px 10px 5px black"
+          ></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: 5px 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view
+            class="common"
+            style="border-radius: 125rpx; box-shadow: 5px 5px 5px 5px black"
+          ></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: -5px -5px 5px black</text>
+        <view class="backgroundview">
+          <view
+            class="common"
+            style="border-radius: 125rpx; box-shadow: -5px -5px 5px black"
+          ></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
+        <view class="backgroundview">
+          <view
+            class="common"
+            style="
+              border-radius: 125rpx;
+              box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
+            "
+          ></view>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
-<script>
-
-</script>
-
 <style>
-	.common {
-		width: 250rpx;
-		height: 250rpx;
-		background-color: brown;
-	}
-
-	.backgroundview {
-		width: 500rpx;
-		height: 500rpx;
-		background-color: white;
-		justify-content: center;
-		align-items: center;
-	}
-</style>
\ No newline at end of file
+.common {
+  width: 250rpx;
+  height: 250rpx;
+  background-color: brown;
+}
+
+.backgroundview {
+  width: 500rpx;
+  height: 500rpx;
+  background-color: white;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/pages/CSS/flex/align-content.uvue b/pages/CSS/flex/align-content.uvue
index af2c205524d492fd64823fb9926aee7d1d916d71..a90f8c522c6a500ac2517ce2b17bcae54c85ba3a 100644
--- a/pages/CSS/flex/align-content.uvue
+++ b/pages/CSS/flex/align-content.uvue
@@ -1,89 +1,150 @@
 <template>
-	<view style="flex-grow: 1;">
-		<view>
-			<text>align-content: center</text>
-			<view class="common" style="align-content: center;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view style="flex-grow: 1">
+      <view>
+        <text>align-content: center</text>
+        <view class="common" style="align-content: center">
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>align-content: flex-start</text>
-			<view class="common" style="align-content: flex-start;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
+      <view>
+        <text>align-content: flex-start</text>
+        <view class="common" style="align-content: flex-start">
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>align-content: flex-end</text>
-			<view class="common" style="align-content: flex-end;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
+      <view>
+        <text>align-content: flex-end</text>
+        <view class="common" style="align-content: flex-end">
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>align-content: space-between</text>
-			<view class="common" style="align-content: space-between;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
+      <view>
+        <text>align-content: space-between</text>
+        <view class="common" style="align-content: space-between">
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>align-content: space-around</text>
-			<view class="common" style="align-content: space-around;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
-
-		<view>
-			<text>align-content: stretch</text>
-			<view class="common" style="align-content: stretch;">
-				<view style="width: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;background-color: blue;"></view>
-				<view style="width: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
-	</view>
+      <view>
+        <text>align-content: space-around</text>
+        <view class="common" style="align-content: space-around">
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
+      <view>
+        <text>align-content: stretch</text>
+        <view class="common" style="align-content: stretch">
+          <view style="width: 100rpx; background-color: red"></view>
+          <view style="width: 100rpx; background-color: green"></view>
+          <view style="width: 100rpx; background-color: blue"></view>
+          <view style="width: 100rpx; background-color: red"></view>
+          <view style="width: 100rpx; background-color: green"></view>
+          <view style="width: 100rpx; background-color: blue"></view>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
-<script>
-
-</script>
-
 <style>
-	.common {
-		width: 500rpx;
-		height: 500rpx;
-		background-color: gray;
-		flex-flow: row wrap;
-	}
-</style>
\ No newline at end of file
+.common {
+  width: 500rpx;
+  height: 500rpx;
+  background-color: gray;
+  flex-flow: row wrap;
+}
+</style>
diff --git a/pages/CSS/flex/align-items.uvue b/pages/CSS/flex/align-items.uvue
index d52d1b0a40d7a58f9e9b7c940ac8e09079ea83fe..ca6b05862d47d444e0a41a0031f30e48725340fe 100644
--- a/pages/CSS/flex/align-items.uvue
+++ b/pages/CSS/flex/align-items.uvue
@@ -1,52 +1,72 @@
 <template>
-	<view style="flex-grow: 1;">
-		<view>
-			<text>align-items: center</text>
-			<view class="common" style="align-items: center;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view style="flex-grow: 1">
+      <view>
+        <text>align-items: center</text>
+        <view class="common" style="align-items: center">
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>align-items: flex-start</text>
-			<view class="common" style="align-items: flex-start;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
+      <view>
+        <text>align-items: flex-start</text>
+        <view class="common" style="align-items: flex-start">
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>align-items: flex-end</text>
-			<view class="common" style="align-items: flex-end;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
+      <view>
+        <text>align-items: flex-end</text>
+        <view class="common" style="align-items: flex-end">
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>align-items: stretch</text>
-			<view class="common" style="align-items: stretch;">
-				<view style="width: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
-	</view>
+      <view>
+        <text>align-items: stretch</text>
+        <view class="common" style="align-items: stretch">
+          <view style="width: 100rpx; background-color: red"></view>
+          <view style="width: 100rpx; background-color: green"></view>
+          <view style="width: 100rpx; background-color: blue"></view>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
-<script>
-
-</script>
-
 <style>
-	.common {
-		width: 500rpx;
-		height: 500rpx;
-		background-color: gray;
-		flex-direction: row;
-	}
-</style>
\ No newline at end of file
+.common {
+  width: 500rpx;
+  height: 500rpx;
+  background-color: gray;
+  flex-direction: row;
+}
+</style>
diff --git a/pages/CSS/flex/flex-basis.uvue b/pages/CSS/flex/flex-basis.uvue
index f94abb3f044d34ecaef400357edeb8ad7340866a..e1bd3221210b8ef0f7f978f6fd63db7878b32d02 100644
--- a/pages/CSS/flex/flex-basis.uvue
+++ b/pages/CSS/flex/flex-basis.uvue
@@ -1,28 +1,35 @@
 <template>
-	<view style="flex-grow: 1;">
-		<view>
-			<text>flex-basis</text>
-			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
-				<view class="common" style="flex-basis: 300rpx;">
-					<text>300rpx</text>
-				</view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
-	</view>
+  <view style="flex-grow: 1">
+    <view>
+      <text>flex-basis</text>
+      <view
+        style="
+          width: 500rpx;
+          height: 300rpx;
+          background-color: gray;
+          flex-direction: row;
+        "
+      >
+        <view class="common" style="flex-basis: 300rpx">
+          <text>300rpx</text>
+        </view>
+        <view
+          style="width: 100rpx; height: 100rpx; background-color: green"
+        ></view>
+        <view
+          style="width: 100rpx; height: 100rpx; background-color: blue"
+        ></view>
+      </view>
+    </view>
+  </view>
 </template>
 
-<script>
-
-</script>
-
 <style>
-	.common {
-		width: 100rpx;
-		height: 100rpx;
-		background-color: red;
-		justify-content: center;
-		align-items: center;
-	}
-</style>
\ No newline at end of file
+.common {
+  width: 100rpx;
+  height: 100rpx;
+  background-color: red;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/pages/CSS/flex/flex-direction.uvue b/pages/CSS/flex/flex-direction.uvue
index c7e3afc30da36d4a29d9b7129fc710b4ebf16d37..bc89c94dea5c65f89032639a5ee2851aaee60e6d 100644
--- a/pages/CSS/flex/flex-direction.uvue
+++ b/pages/CSS/flex/flex-direction.uvue
@@ -1,51 +1,77 @@
 <template>
-	<view style="flex-grow: 1;">
-		<view>
-			<text>flex-direction: row</text>
-			<view class="common" style="flex-direction: row;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view style="flex-grow: 1">
+      <view>
+        <text>flex-direction: row</text>
+        <view class="common" style="flex-direction: row">
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>flex-direction: row-reverse</text>
-			<view class="common" style="flex-direction: row-reverse;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
+      <view>
+        <text>flex-direction: row-reverse</text>
+        <view class="common" style="flex-direction: row-reverse">
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>flex-direction: column</text>
-			<view class="common" style="flex-direction: column;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
+      <view>
+        <text>flex-direction: column</text>
+        <view class="common" style="flex-direction: column">
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>flex-direction: column-reverse</text>
-			<view class="common" style="flex-direction: column-reverse;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
-	</view>
+      <view>
+        <text>flex-direction: column-reverse</text>
+        <view class="common" style="flex-direction: column-reverse">
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
-<script>
-
-</script>
-
 <style>
-	.common {
-		width: 500rpx;
-		height: 500rpx;
-		background-color: gray;
-	}
-</style>
\ No newline at end of file
+.common {
+  width: 500rpx;
+  height: 500rpx;
+  background-color: gray;
+}
+</style>
diff --git a/pages/CSS/flex/flex-flow.uvue b/pages/CSS/flex/flex-flow.uvue
index 7a021ff3e391ddb26c6cc3750fcd8c610919409e..6072a2735e10924b979de45e0df118f06d22e1d9 100644
--- a/pages/CSS/flex/flex-flow.uvue
+++ b/pages/CSS/flex/flex-flow.uvue
@@ -1,63 +1,233 @@
 <template>
-	<view style="flex-grow: 1;">
-		<view>
-			<text>flex-flow: row nowrap</text>
-			<view class="common" style="flex-flow: row nowrap;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
-			</view>
-		</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view style="flex-grow: 1">
+      <view>
+        <text>flex-flow: row nowrap</text>
+        <view class="common" style="flex-flow: row nowrap">
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: red;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: green;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: blue;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: red;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: green;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: blue;
+              flex-shrink: 0;
+            "
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>flex-flow: row wrap</text>
-			<view class="common" style="flex-flow: row wrap;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
-			</view>
-		</view>
+      <view>
+        <text>flex-flow: row wrap</text>
+        <view class="common" style="flex-flow: row wrap">
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: red;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: green;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: blue;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: red;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: green;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: blue;
+              flex-shrink: 0;
+            "
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>flex-flow: column nowrap</text>
-			<view class="common" style="flex-flow: column nowrap;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
-			</view>
-		</view>
+      <view>
+        <text>flex-flow: column nowrap</text>
+        <view class="common" style="flex-flow: column nowrap">
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: red;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: green;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: blue;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: red;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: green;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: blue;
+              flex-shrink: 0;
+            "
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>flex-flow: column wrap</text>
-			<view class="common" style="flex-flow: column wrap;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
-			</view>
-		</view>
-	</view>
+      <view>
+        <text>flex-flow: column wrap</text>
+        <view class="common" style="flex-flow: column wrap">
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: red;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: green;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: blue;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: red;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: green;
+              flex-shrink: 0;
+            "
+          ></view>
+          <view
+            style="
+              width: 100rpx;
+              height: 100rpx;
+              background-color: blue;
+              flex-shrink: 0;
+            "
+          ></view>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
-<script>
-
-</script>
-
 <style>
-	.common {
-		width: 500rpx;
-		height: 500rpx;
-		background-color: gray;
-	}
-</style>
\ No newline at end of file
+.common {
+  width: 500rpx;
+  height: 500rpx;
+  background-color: gray;
+}
+</style>
diff --git a/pages/CSS/flex/flex-grow.uvue b/pages/CSS/flex/flex-grow.uvue
index e40fa97a4b2d64f61daf5e40721381ed7ccb1268..35a5f4b83fe87b2e403c94590650716592d092d2 100644
--- a/pages/CSS/flex/flex-grow.uvue
+++ b/pages/CSS/flex/flex-grow.uvue
@@ -1,31 +1,34 @@
 <template>
-	<view style="flex-grow: 1;">
-		<view>
-			<text>flex-grow</text>
-			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
-				<view class="common" style="background-color: red;flex-grow: 0.5;">
-					<text>0.5</text>
-				</view>
-				<view class="common" style="background-color: green;flex-grow: 1;">
-					<text>1</text>
-				</view>
-				<view class="common" style="background-color: blue;flex-grow: 2">
-					<text>2</text>
-				</view>
-			</view>
-		</view>
-	</view>
+  <view style="flex-grow: 1">
+    <view>
+      <text>flex-grow</text>
+      <view
+        style="
+          width: 500rpx;
+          height: 300rpx;
+          background-color: gray;
+          flex-direction: row;
+        "
+      >
+        <view class="common" style="background-color: red; flex-grow: 0.5">
+          <text>0.5</text>
+        </view>
+        <view class="common" style="background-color: green; flex-grow: 1">
+          <text>1</text>
+        </view>
+        <view class="common" style="background-color: blue; flex-grow: 2">
+          <text>2</text>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
-<script>
-
-</script>
-
 <style>
-	.common {
-		width: 100rpx;
-		height: 100rpx;
-		justify-content: center;
-		align-items: center;
-	}
-</style>
\ No newline at end of file
+.common {
+  width: 100rpx;
+  height: 100rpx;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/pages/CSS/flex/flex-shrink.uvue b/pages/CSS/flex/flex-shrink.uvue
index 04d5431d36a81600bdd6ae1ee99f9c82cbdc0fc2..5f0dda6dc85a15ba82a2ec53594e047b8d884c19 100644
--- a/pages/CSS/flex/flex-shrink.uvue
+++ b/pages/CSS/flex/flex-shrink.uvue
@@ -1,31 +1,34 @@
 <template>
-	<view style="flex-grow: 1;">
-		<view>
-			<text>flex-shrink</text>
-			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
-				<view class="common" style="background-color: red;flex-shrink: 1;">
-					<text>1</text>
-				</view>
-				<view class="common" style="background-color: green;flex-shrink: 2;">
-					<text>2</text>
-				</view>
-				<view class="common" style="background-color: blue;flex-shrink: 3;">
-					<text>3</text>
-				</view>
-			</view>
-		</view>
-	</view>
+  <view style="flex-grow: 1">
+    <view>
+      <text>flex-shrink</text>
+      <view
+        style="
+          width: 500rpx;
+          height: 300rpx;
+          background-color: gray;
+          flex-direction: row;
+        "
+      >
+        <view class="common" style="background-color: red; flex-shrink: 1">
+          <text>1</text>
+        </view>
+        <view class="common" style="background-color: green; flex-shrink: 2">
+          <text>2</text>
+        </view>
+        <view class="common" style="background-color: blue; flex-shrink: 3">
+          <text>3</text>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
-<script>
-
-</script>
-
 <style>
-	.common {
-		width: 250rpx;
-		height: 100rpx;
-		justify-content: center;
-		align-items: center;
-	}
-</style>
\ No newline at end of file
+.common {
+  width: 250rpx;
+  height: 100rpx;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/pages/CSS/flex/flex.uvue b/pages/CSS/flex/flex.uvue
index 87cf159f7e4d4e5b22d72278af88b59ab19b71f3..381947c261c4e7b1a90920cdd191d36bd7441c37 100644
--- a/pages/CSS/flex/flex.uvue
+++ b/pages/CSS/flex/flex.uvue
@@ -1,51 +1,97 @@
 <template>
-	<view style="flex-grow: 1;">
-		<view>
-			<text>flex: 0</text>
-			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
-				<view class="common" style="min-width: 50rpx;flex: 0;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view style="flex-grow: 1">
+      <view>
+        <text>flex: 0</text>
+        <view
+          style="
+            width: 500rpx;
+            height: 300rpx;
+            background-color: gray;
+            flex-direction: row;
+          "
+        >
+          <view class="common" style="min-width: 50rpx; flex: 0"></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>flex: 1</text>
-			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
-				<view class="common" style="flex: 1"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
+      <view>
+        <text>flex: 1</text>
+        <view
+          style="
+            width: 500rpx;
+            height: 300rpx;
+            background-color: gray;
+            flex-direction: row;
+          "
+        >
+          <view class="common" style="flex: 1"></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>flex: auto</text>
-			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
-				<view class="common" style="flex: auto;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
+      <view>
+        <text>flex: auto</text>
+        <view
+          style="
+            width: 500rpx;
+            height: 300rpx;
+            background-color: gray;
+            flex-direction: row;
+          "
+        >
+          <view class="common" style="flex: auto"></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>flex: none</text>
-			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
-				<view class="common" style="flex: none;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
-	</view>
+      <view>
+        <text>flex: none</text>
+        <view
+          style="
+            width: 500rpx;
+            height: 300rpx;
+            background-color: gray;
+            flex-direction: row;
+          "
+        >
+          <view class="common" style="flex: none"></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
-<script>
-
-</script>
-
 <style>
-	.common {
-		width: 100rpx;
-		height: 100rpx;
-		background-color: red;
-	}
-</style>
\ No newline at end of file
+.common {
+  width: 100rpx;
+  height: 100rpx;
+  background-color: red;
+}
+</style>
diff --git a/pages/CSS/flex/justify-content.uvue b/pages/CSS/flex/justify-content.uvue
index 74c78e44c1add871d5493bca20c8129cb3b62bbe..ecbd13043b4d1f9b86e8f34757247e45472d4192 100644
--- a/pages/CSS/flex/justify-content.uvue
+++ b/pages/CSS/flex/justify-content.uvue
@@ -1,61 +1,93 @@
 <template>
-	<view style="flex-grow: 1;">
-		<view>
-			<text>justify-content: center</text>
-			<view class="common" style="justify-content: center;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view style="flex-grow: 1">
+      <view>
+        <text>justify-content: center</text>
+        <view class="common" style="justify-content: center">
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>justify-content: flex-start</text>
-			<view class="common" style="justify-content: flex-start;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
+      <view>
+        <text>justify-content: flex-start</text>
+        <view class="common" style="justify-content: flex-start">
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>justify-content: flex-end</text>
-			<view class="common" style="justify-content: flex-end;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
+      <view>
+        <text>justify-content: flex-end</text>
+        <view class="common" style="justify-content: flex-end">
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>justify-content: space-between</text>
-			<view class="common" style="justify-content: space-between;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
+      <view>
+        <text>justify-content: space-between</text>
+        <view class="common" style="justify-content: space-between">
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
 
-		<view>
-			<text>justify-content: space-around</text>
-			<view class="common" style="justify-content: space-around;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</view>
-		</view>
-	</view>
+      <view>
+        <text>justify-content: space-around</text>
+        <view class="common" style="justify-content: space-around">
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
-<script>
-
-</script>
-
 <style>
-	.common {
-		width: 500rpx;
-		height: 500rpx;
-		background-color: gray;
-		flex-direction: row;
-	}
-</style>
\ No newline at end of file
+.common {
+  width: 500rpx;
+  height: 500rpx;
+  background-color: gray;
+  flex-direction: row;
+}
+</style>
diff --git a/pages/CSS/layout/position.uvue b/pages/CSS/layout/position.uvue
index bbfa86a1640a660843865090252bb4a5fe76884e..130ff813b5fa2a0c393366552338a01281577630 100644
--- a/pages/CSS/layout/position.uvue
+++ b/pages/CSS/layout/position.uvue
@@ -1,70 +1,126 @@
 <template>
-	<view style="flex-grow: 1;">
-		<view>
-			<text>position: relative</text>
-			<scroll-view style="width: 500rpx;height: 500rpx;background-color: gray;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view class="common" style="position: relative;">
-					<text>relative</text>
-				</view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</scroll-view>
-		</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view style="flex-grow: 1">
+      <view>
+        <text>position: relative</text>
+        <scroll-view
+          style="width: 500rpx; height: 500rpx; background-color: gray"
+        >
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view class="common" style="position: relative">
+            <text>relative</text>
+          </view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </scroll-view>
+      </view>
 
-		<view>
-			<text>position: absolute</text>
-			<scroll-view style="width: 500rpx;height: 500rpx;background-color: gray;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view class="common" style="position: absolute;">
-					<text>absolute</text>
-				</view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</scroll-view>
-		</view>
+      <view>
+        <text>position: absolute</text>
+        <scroll-view
+          style="width: 500rpx; height: 500rpx; background-color: gray"
+        >
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view class="common" style="position: absolute">
+            <text>absolute</text>
+          </view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </scroll-view>
+      </view>
 
-		<view>
-			<text>position: fixed</text>
-			<scroll-view style="width: 500rpx;height: 500rpx;background-color: gray;">
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view class="common" style="position: fixed;">
-					<text>fixed</text>
-				</view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
-				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
-			</scroll-view>
-		</view>
-	</view>
+      <view>
+        <text>position: fixed</text>
+        <scroll-view
+          style="width: 500rpx; height: 500rpx; background-color: gray"
+        >
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view class="common" style="position: fixed">
+            <text>fixed</text>
+          </view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: red"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: green"
+          ></view>
+          <view
+            style="width: 100rpx; height: 100rpx; background-color: blue"
+          ></view>
+        </scroll-view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
-<script>
-
-</script>
-
 <style>
-	.common {
-		width: 100rpx;
-		height: 100rpx;
-		background-color: green;
-		top: 50rpx;
-		left: 50rpx;
-		justify-content: center;
-		align-items: center;
-	}
-</style>
\ No newline at end of file
+.common {
+  width: 100rpx;
+  height: 100rpx;
+  background-color: green;
+  top: 50rpx;
+  left: 50rpx;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/pages/CSS/transform/transform.uvue b/pages/CSS/transform/transform.uvue
index 284581d60d2f835c351972b9ce50f07a225ab8df..25338cb5317fec2ac6a54fe8e5af6aaab4997a05 100644
--- a/pages/CSS/transform/transform.uvue
+++ b/pages/CSS/transform/transform.uvue
@@ -1,36 +1,57 @@
 <template>
-	<view>
-		<view class="baseStyle" style="transform: translateX(120%);">translateX(120%)</view>
-		<view class="baseStyle" style="transform: translateY(-30rpx);">translateY(-30rpx)</view>
-		<view class="baseStyle" style="transform: translate(120%,50%);">translate(120%,50%)</view>
-		<view class="baseStyle" style="transform: scaleX(0.8);">scaleX(0.8)</view>
-		<view class="baseStyle" style="transform: scaleY(0.8);">scaleY(0.8)</view>
-		<view class="baseStyle" style="transform: scale(0.8,0.8);">scale(0.8,0.8)</view>
-		<view class="baseStyle" style="transform: rotate(20deg);">rotate(20deg)</view>
-		<view class="baseStyle" style="transform: rotateX(50deg);">rotateX(50deg)</view>
-		<view class="baseStyle" style="transform: rotateY(50deg);">rotateY(50deg)</view>
-		<view class="baseStyle" style="transform: rotateZ(50deg);">rotateZ(50deg)</view>
-	</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view>
+      <view class="baseStyle" style="transform: translateX(120%)"
+        >translateX(120%)</view
+      >
+      <view class="baseStyle" style="transform: translateY(-30rpx)"
+        >translateY(-30rpx)</view
+      >
+      <view class="baseStyle" style="transform: translate(120%, 50%)"
+        >translate(120%,50%)</view
+      >
+      <view class="baseStyle" style="transform: scaleX(0.8)">scaleX(0.8)</view>
+      <view class="baseStyle" style="transform: scaleY(0.8)">scaleY(0.8)</view>
+      <view class="baseStyle" style="transform: scale(0.8, 0.8)"
+        >scale(0.8,0.8)</view
+      >
+      <view class="baseStyle" style="transform: rotate(20deg)"
+        >rotate(20deg)</view
+      >
+      <view class="baseStyle" style="transform: rotateX(50deg)"
+        >rotateX(50deg)</view
+      >
+      <view class="baseStyle" style="transform: rotateY(50deg)"
+        >rotateY(50deg)</view
+      >
+      <view class="baseStyle" style="transform: rotateZ(50deg)"
+        >rotateZ(50deg)</view
+      >
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
 <script lang="ts">
-	export default {
-		data() {
-			return {}
-		},
-		methods: {
-		}
-	}
+export default {
+  data() {
+    return {}
+  },
+  methods: {},
+}
 </script>
 
 <style>
-	.baseStyle {
-		background-color: cadetblue;
-		margin: 10rpx;
-		width: 300rpx;
-		height: 300rpx;
-		align-items: center;
-		flex: 1;
-		justify-content: center;
-	}
-</style>
\ No newline at end of file
+.baseStyle {
+  background-color: cadetblue;
+  margin: 10rpx;
+  width: 300rpx;
+  height: 300rpx;
+  align-items: center;
+  flex: 1;
+  justify-content: center;
+}
+</style>
diff --git a/pages/CSS/transition/transition.uvue b/pages/CSS/transition/transition.uvue
index b79445df65cb11a7b0b20cd08e49f54a28a6e190..6d39432ce8f44271f04c859fb25bc0f9013ade6c 100644
--- a/pages/CSS/transition/transition.uvue
+++ b/pages/CSS/transition/transition.uvue
@@ -1,142 +1,192 @@
 <template>
-	<view>
-		<view class="container">
-			<text class="text">点击修改宽度</text>
-			<view class="base-style transition-width" :style="widthOrHeight" @click="changeWidthOrHeight"></view>
-		</view>
-		<view class="container">
-			<text class="text">点击修改Margin</text>
-			<view class="base-style transition-margin" :style="styleMargin" @click="changeMargin"></view>
-		</view>
-		<view class="container">
-			<text class="text">点击修改Padding</text>
-			<view class="base-style transition-padding" :style="stylePadding" @click="changePadding">
-				<view style="background-color: black;height: 50px;width: 50px;"></view>
-			</view>
-		</view>
-		<view class="container">
-			<text class="text">点击修改Background</text>
-			<view class="base-style transition-background" :style="styleBackground" @click="changeBackground"></view>
-		</view>
-		<view class="container">
-			<text class="text">点击修改Transform</text>
-			<view class="base-style transition-transform" :style="styleTransform" @click="changeTransform"></view>
-		</view>
-		<view class="container">
-			<text class="text">点击修改Border</text>
-			<view class="base-style transition-border" :style="styleBorder" @click="changeBorder"></view>
-		</view>
-		<view class="container">
-			<text class="text">点击修改Position</text>
-			<view class="base-style transition-position" :style="stylePosition" @click="changestylePosition"></view>
-		</view>
-	</view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view>
+      <view class="container">
+        <text class="text">点击修改宽度</text>
+        <view
+          class="base-style transition-width"
+          :style="widthOrHeight"
+          @click="changeWidthOrHeight"
+        ></view>
+      </view>
+      <view class="container">
+        <text class="text">点击修改Margin</text>
+        <view
+          class="base-style transition-margin"
+          :style="styleMargin"
+          @click="changeMargin"
+        ></view>
+      </view>
+      <view class="container">
+        <text class="text">点击修改Padding</text>
+        <view
+          class="base-style transition-padding"
+          :style="stylePadding"
+          @click="changePadding"
+        >
+          <view
+            style="background-color: black; height: 50px; width: 50px"
+          ></view>
+        </view>
+      </view>
+      <view class="container">
+        <text class="text">点击修改Background</text>
+        <view
+          class="base-style transition-background"
+          :style="styleBackground"
+          @click="changeBackground"
+        ></view>
+      </view>
+      <view class="container">
+        <text class="text">点击修改Transform</text>
+        <view
+          class="base-style transition-transform"
+          :style="styleTransform"
+          @click="changeTransform"
+        ></view>
+      </view>
+      <view class="container">
+        <text class="text">点击修改Border</text>
+        <view
+          class="base-style transition-border"
+          :style="styleBorder"
+          @click="changeBorder"
+        ></view>
+      </view>
+      <view class="container">
+        <text class="text">点击修改Position</text>
+        <view
+          class="base-style transition-position"
+          :style="stylePosition"
+          @click="changestylePosition"
+        ></view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				isTranstionWidthOrHeight: false,
-				widthOrHeight: "",
-				isTranstionChangeMargin: false,
-				styleMargin: "",
-				isTransitionStylePadding: false,
-				stylePadding: "",
-				isTransitionstyleBackground: false,
-				styleBackground: "",
-				isTransitionStyleTransform: false,
-				styleTransform: "",
-				isTransitionstyleBorder: false,
-				styleBorder: "",
-				isTransitionstylePosition: false,
-				stylePosition: ""
-			}
-		},
-		methods: {
-			changeWidthOrHeight() {
-				this.widthOrHeight = this.isTranstionWidthOrHeight ? "width:400rpx" : "width:600rpx"
-				this.isTranstionWidthOrHeight = !this.isTranstionWidthOrHeight
-			},
-			changeMargin() {
-				this.styleMargin = this.isTranstionChangeMargin ? "margin-top:0rpx;margin-left:0rpx" : "margin-top:100rpx;margin-left:100rpx"
-				this.isTranstionChangeMargin = !this.isTranstionChangeMargin
-			},
+export default {
+  data() {
+    return {
+      isTranstionWidthOrHeight: false,
+      widthOrHeight: '',
+      isTranstionChangeMargin: false,
+      styleMargin: '',
+      isTransitionStylePadding: false,
+      stylePadding: '',
+      isTransitionstyleBackground: false,
+      styleBackground: '',
+      isTransitionStyleTransform: false,
+      styleTransform: '',
+      isTransitionstyleBorder: false,
+      styleBorder: '',
+      isTransitionstylePosition: false,
+      stylePosition: '',
+    }
+  },
+  methods: {
+    changeWidthOrHeight() {
+      this.widthOrHeight = this.isTranstionWidthOrHeight
+        ? 'width:400rpx'
+        : 'width:600rpx'
+      this.isTranstionWidthOrHeight = !this.isTranstionWidthOrHeight
+    },
+    changeMargin() {
+      this.styleMargin = this.isTranstionChangeMargin
+        ? 'margin-top:0rpx;margin-left:0rpx'
+        : 'margin-top:100rpx;margin-left:100rpx'
+      this.isTranstionChangeMargin = !this.isTranstionChangeMargin
+    },
 
-			changePadding() {
-				this.stylePadding = this.isTransitionStylePadding ? "padding-top:0rpx;padding-left:0rpx" : "padding-top:100rpx;padding-left:100rpx"
-				this.isTransitionStylePadding = !this.isTransitionStylePadding
-			},
-			changeBackground() {
-				this.styleBackground = this.isTransitionstyleBackground ? "background-color: brown;opacity:1" : "background-color: black;opacity:0.5"
-				this.isTransitionstyleBackground = !this.isTransitionstyleBackground
-			},
-			changeTransform() {
-				this.styleTransform = this.isTransitionStyleTransform ? "transform: rotate(0deg)" : "transform: rotate(135deg)"
-				this.isTransitionStyleTransform = !this.isTransitionStyleTransform
-			},
-			changeBorder() {
-				this.styleBorder = this.isTransitionstyleBorder ? "border-color: brown;" : "border-color: yellow;"
-				this.isTransitionstyleBorder = !this.isTransitionstyleBorder
-			},
-			changestylePosition() {
-				this.stylePosition = this.isTransitionstylePosition ? "left:0rpx" : "left:150rpx;"
-				this.isTransitionstylePosition = !this.isTransitionstylePosition
-			}
-		}
-	}
+    changePadding() {
+      this.stylePadding = this.isTransitionStylePadding
+        ? 'padding-top:0rpx;padding-left:0rpx'
+        : 'padding-top:100rpx;padding-left:100rpx'
+      this.isTransitionStylePadding = !this.isTransitionStylePadding
+    },
+    changeBackground() {
+      this.styleBackground = this.isTransitionstyleBackground
+        ? 'background-color: brown;opacity:1'
+        : 'background-color: black;opacity:0.5'
+      this.isTransitionstyleBackground = !this.isTransitionstyleBackground
+    },
+    changeTransform() {
+      this.styleTransform = this.isTransitionStyleTransform
+        ? 'transform: rotate(0deg)'
+        : 'transform: rotate(135deg)'
+      this.isTransitionStyleTransform = !this.isTransitionStyleTransform
+    },
+    changeBorder() {
+      this.styleBorder = this.isTransitionstyleBorder
+        ? 'border-color: brown;'
+        : 'border-color: yellow;'
+      this.isTransitionstyleBorder = !this.isTransitionstyleBorder
+    },
+    changestylePosition() {
+      this.stylePosition = this.isTransitionstylePosition
+        ? 'left:0rpx'
+        : 'left:150rpx;'
+      this.isTransitionstylePosition = !this.isTransitionstylePosition
+    },
+  },
+}
 </script>
 
 <style>
-	.container {
-		margin: 15rpx;
-		background-color: white;
-	}
-	.text{
-		margin-top: 20rpx;
-		margin-bottom: 32rpx;
-	}
+.container {
+  margin: 15rpx;
+  background-color: white;
+}
+.text {
+  margin-top: 20rpx;
+  margin-bottom: 32rpx;
+}
 
-	.base-style {
-		width: 400rpx;
-		height: 400rpx;
-		background-color: brown;
-	}
+.base-style {
+  width: 400rpx;
+  height: 400rpx;
+  background-color: brown;
+}
 
-	.transition-width {
-		transition-property: width;
-		transition-duration: 1000;
-	}
+.transition-width {
+  transition-property: width;
+  transition-duration: 1000;
+}
 
-	.transition-margin {
-		transition-property: margin-left, margin-top;
-		transition-duration: 1000;
-	}
+.transition-margin {
+  transition-property: margin-left, margin-top;
+  transition-duration: 1000;
+}
 
-	.transition-padding {
-		transition-property: padding-left, padding-top;
-		transition-duration: 1000;
-	}
+.transition-padding {
+  transition-property: padding-left, padding-top;
+  transition-duration: 1000;
+}
 
-	.transition-background {
-		transition-property: background-color, opacity;
-		transition-duration: 1000;
-	}
+.transition-background {
+  transition-property: background-color, opacity;
+  transition-duration: 1000;
+}
 
-	.transition-transform {
-		transition-property: transform;
-		transition-duration: 1000;
-	}
+.transition-transform {
+  transition-property: transform;
+  transition-duration: 1000;
+}
 
-	.transition-border {
-		border-width: 5px;
-		border-color: brown;
-		transition-property: border-color;
-		transition-duration: 1000;
-	}
+.transition-border {
+  border-width: 5px;
+  border-color: brown;
+  transition-property: border-color;
+  transition-duration: 1000;
+}
 
-	.transition-position {
-		transition-property: left;
-		transition-duration: 1000;
-	}
-</style>
\ No newline at end of file
+.transition-position {
+  transition-property: left;
+  transition-duration: 1000;
+}
+</style>
diff --git a/pages/component/button/button.uvue b/pages/component/button/button.uvue
index da997de57435989f11fceed3f621babeb4638596..cb3c3646c9874fc649c98c2d9c87540693ae19b7 100644
--- a/pages/component/button/button.uvue
+++ b/pages/component/button/button.uvue
@@ -1,86 +1,119 @@
 <template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
     <view>
-        <page-head :title="title"></page-head>
-        <view class="uni-padding-wrap uni-common-mt">
-            <button :type="type" :size="size" :plain="plain" :disabled="disabled" class="button test-button">页面主操作
-                Normal</button>
-            <!-- <button type="primary" :loading="loading" class="button">页面主操作 Loading</button> -->
-            <button type="primary" :disabled="true" class="button">页面主操作 Disabled</button>
+      <page-head :title="title"></page-head>
+      <view class="uni-padding-wrap uni-common-mt">
+        <button
+          :type="type"
+          :size="size"
+          :plain="plain"
+          :disabled="disabled"
+          class="button test-button"
+        >
+          页面主操作 Normal
+        </button>
+        <!-- <button type="primary" :loading="loading" class="button">页面主操作 Loading</button> -->
+        <button type="primary" :disabled="true" class="button">
+          页面主操作 Disabled
+        </button>
 
-            <button type="default" class="button default-button" @click="addCount">页面次要操作 Normal</button>
-            <button type="default" :disabled="true" class="button disabled-button">页面次要操作 Disabled</button>
+        <button type="default" class="button default-button" @click="addCount">
+          页面次要操作 Normal
+        </button>
+        <button type="default" :disabled="true" class="button disabled-button">
+          页面次要操作 Disabled
+        </button>
 
-            <button type="warn" class="button">警告类操作 Normal</button>
-            <button type="warn" :disabled="true" class="button">警告类操作 Disabled</button>
+        <button type="warn" class="button">警告类操作 Normal</button>
+        <button type="warn" :disabled="true" class="button">
+          警告类操作 Disabled
+        </button>
 
-            <view class="button-sp-area">
-                <button type="primary" :plain="true" class="button text-button">{{text}}</button>
-                <button type="primary" :disabled="true" :plain="true" class="button">
-                    不可点击的按钮
-                </button>
+        <view class="button-sp-area">
+          <button type="primary" :plain="true" class="button text-button">
+            {{ text }}
+          </button>
+          <button type="primary" :disabled="true" :plain="true" class="button">
+            不可点击的按钮
+          </button>
 
-                <button type="default" :plain="true" class="button">按钮 plain背景镂空</button>
-                <button type="default" :disabled="true" :plain="true" class="button">按钮 Disabled</button>
+          <button type="default" :plain="true" class="button">
+            按钮 plain背景镂空
+          </button>
+          <button type="default" :disabled="true" :plain="true" class="button">
+            按钮 Disabled
+          </button>
 
-                <view class="uni-flex uni-row">
-                    <button class="button mini-btn" type="primary" size="mini">按钮 mini</button>
-                    <button class="button mini-btn" type="default" size="mini">按钮 mini</button>
-                    <button class="button mini-btn" type="warn" size="mini">按钮 mini</button>
-                </view>
-            </view>
+          <view class="uni-flex uni-row">
+            <button class="button mini-btn" type="primary" size="mini">
+              按钮 mini
+            </button>
+            <button class="button mini-btn" type="default" size="mini">
+              按钮 mini
+            </button>
+            <button class="button mini-btn" type="warn" size="mini">
+              按钮 mini
+            </button>
+          </view>
         </view>
+      </view>
     </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 <script lang="ts">
-    export default {
-        data() {
-            return {
-                title: 'button',
-                loading: false,
-                _timer: 0,
-                text: '文字来自data绑定',
-                type: 'primary',
-                size: 'default',
-                plain: false,
-                disabled: false,
-                count: 0
-            }
-        },
-        onShow() {
-            // this.clearTimer();
-            // this._timer = setTimeout(() => {
-            //     // this.loading = true;
-            // }, 300)
-        },
-        onUnload() {
-            // this.clearTimer();
-            // this.loading = false;
-        },
-        methods: {
-            // clearTimer() {
-            //     if (this._timer != 0) {
-            //         clearTimeout(this._timer);
-            //     }
-            // }
-            addCount() {
-                this.count++
-            }
-        },
+export default {
+  data() {
+    return {
+      title: 'button',
+      loading: false,
+      _timer: 0,
+      text: '文字来自data绑定',
+      type: 'primary',
+      size: 'default',
+      plain: false,
+      disabled: false,
+      count: 0,
     }
+  },
+  onShow() {
+    // this.clearTimer();
+    // this._timer = setTimeout(() => {
+    //     // this.loading = true;
+    // }, 300)
+  },
+  onUnload() {
+    // this.clearTimer();
+    // this.loading = false;
+  },
+  methods: {
+    // clearTimer() {
+    //     if (this._timer != 0) {
+    //         clearTimeout(this._timer);
+    //     }
+    // }
+    addCount() {
+      this.count++
+    },
+  },
+}
 </script>
 
 <style>
-    .button {
-        margin-top: 30rpx;
-    }
+.button {
+  margin-top: 30rpx;
+}
 
-    .button-sp-area {
-        margin: 0 auto;
-        width: 70%;
-    }
+.button-sp-area {
+  margin: 0 auto;
+  width: 70%;
+}
 
-    .mini-btn {
-        margin-right: 10rpx;
-        margin-bottom: 30rpx;
-    }
-</style>
\ No newline at end of file
+.mini-btn {
+  margin-right: 10rpx;
+  margin-bottom: 30rpx;
+}
+</style>
diff --git a/pages/component/checkbox/checkbox.uvue b/pages/component/checkbox/checkbox.uvue
index 2734e84d2ca1e17924b8bfc4fd1b1364222ce479..d9b24e6f0635c9902bf37a71b2cb697d0f1e51f9 100644
--- a/pages/component/checkbox/checkbox.uvue
+++ b/pages/component/checkbox/checkbox.uvue
@@ -1,129 +1,166 @@
 <template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
     <view>
-        <page-head :title="title"></page-head>
-        <view class="uni-padding-wrap uni-common-mt">
-            <view class="uni-title uni-common-mt">
-                <text class="uni-title-text">
-                    默认样式
-                </text>
-            </view>
-            <view>
-                <checkbox-group class="uni-flex uni-row checkbox-group" @change="testChange" style="flex-wrap: wrap;">
-                    <checkbox value="cb" :checked="checked" :color="color" style="margin-right: 30rpx;"
-                        class="checkbox cb">选中</checkbox>
-                    <checkbox value="cb1" style="margin-right: 30rpx;" class="checkbox cb1">{{text}}</checkbox>
-                    <checkbox value="cb2" :disabled="disabled" class="checkbox cb2">禁用</checkbox>
-                    <checkbox value="cb3" style="margin-top: 20rpx;" class="checkbox cb3">
-                        {{wrapText}}
-                    </checkbox>
-                </checkbox-group>
-            </view>
-            <view class="uni-title uni-common-mt">
-                <text class="uni-title-text">
-                    不同颜色和尺寸的checkbox
-                </text>
-            </view>
-            <view>
-                <checkbox-group class="uni-flex uni-row checkbox-group">
-                    <checkbox value="cb1" :checked="true" color="#FFCC33"
-                        style="transform:scale(0.7); margin-right: 30rpx;" class="checkbox">选中
-                    </checkbox>
-                    <checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" class="checkbox">未选中</checkbox>
-                </checkbox-group>
-            </view>
+      <page-head :title="title"></page-head>
+      <view class="uni-padding-wrap uni-common-mt">
+        <view class="uni-title uni-common-mt">
+          <text class="uni-title-text"> 默认样式 </text>
         </view>
-
-        <view class="uni-padding-wrap">
-            <view class="uni-title uni-common-mt">
-                <text class="uni-title-text">
-                    推荐展示样式
-                </text>
-            </view>
+        <view>
+          <checkbox-group
+            class="uni-flex uni-row checkbox-group"
+            @change="testChange"
+            style="flex-wrap: wrap"
+          >
+            <checkbox
+              value="cb"
+              :checked="checked"
+              :color="color"
+              style="margin-right: 30rpx"
+              class="checkbox cb"
+              >选中</checkbox
+            >
+            <checkbox
+              value="cb1"
+              style="margin-right: 30rpx"
+              class="checkbox cb1"
+              >{{ text }}</checkbox
+            >
+            <checkbox value="cb2" :disabled="disabled" class="checkbox cb2"
+              >禁用</checkbox
+            >
+            <checkbox
+              value="cb3"
+              style="margin-top: 20rpx"
+              class="checkbox cb3"
+            >
+              {{ wrapText }}
+            </checkbox>
+          </checkbox-group>
+        </view>
+        <view class="uni-title uni-common-mt">
+          <text class="uni-title-text"> 不同颜色和尺寸的checkbox </text>
         </view>
-        <view class="uni-list uni-common-pl">
-            <checkbox-group @change="checkboxChange" class="checkbox-group">
-                <checkbox class="uni-list-cell uni-list-cell-pd checkbox" v-for="(item, index) in items"
-                    :key="item.value" :value="item.value" :checked="item.checked"
-                    :class="index < items.length - 1 ? 'uni-list-cell-line': ''">
-                    {{item.name}}
-                </checkbox>
-            </checkbox-group>
+        <view>
+          <checkbox-group class="uni-flex uni-row checkbox-group">
+            <checkbox
+              value="cb1"
+              :checked="true"
+              color="#FFCC33"
+              style="transform: scale(0.7); margin-right: 30rpx"
+              class="checkbox"
+              >选中
+            </checkbox>
+            <checkbox
+              value="cb"
+              color="#FFCC33"
+              style="transform: scale(0.7)"
+              class="checkbox"
+              >未选中</checkbox
+            >
+          </checkbox-group>
+        </view>
+      </view>
+
+      <view class="uni-padding-wrap">
+        <view class="uni-title uni-common-mt">
+          <text class="uni-title-text"> 推荐展示样式 </text>
         </view>
+      </view>
+      <view class="uni-list uni-common-pl">
+        <checkbox-group @change="checkboxChange" class="checkbox-group">
+          <checkbox
+            class="uni-list-cell uni-list-cell-pd checkbox"
+            v-for="(item, index) in items"
+            :key="item.value"
+            :value="item.value"
+            :checked="item.checked"
+            :class="index < items.length - 1 ? 'uni-list-cell-line' : ''"
+          >
+            {{ item.name }}
+          </checkbox>
+        </checkbox-group>
+      </view>
     </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 <script lang="ts">
-    type ItemType = {
-        value : string,
-        name : string,
-        checked : boolean
-    }
-    export default {
-        data() {
-            return {
-                title: 'checkbox 复选框',
-                items: [
-                    {
-                        value: 'CHN',
-                        name: '中国',
-                        checked: true
-                    },
-                    {
-                        value: 'USA',
-                        name: '美国',
-                        checked: false
-                    },
-                    {
-                        value: 'BRA',
-                        name: '巴西',
-                        checked: false
-                    },
-                    {
-                        value: 'JPN',
-                        name: '日本',
-                        checked: false
-                    },
-                    {
-                        value: 'ENG',
-                        name: '英国',
-                        checked: false
-                    },
-                    {
-                        value: 'FRA',
-                        name: '法国',
-                        checked: false
-                    }
-                ] as ItemType[],
-
-                text: '未选中',
-                wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
-                value: [] as string[],
-                disabled: true,
-                checked: true,
-                color: '#007aff',
-            }
+type ItemType = {
+  value: string
+  name: string
+  checked: boolean
+}
+export default {
+  data() {
+    return {
+      title: 'checkbox 复选框',
+      items: [
+        {
+          value: 'CHN',
+          name: '中国',
+          checked: true,
         },
-        methods: {
-            checkboxChange: function (e : CheckboxGroupChangeEvent) {
-                const selectedNames : string[] = []
-                this.items.forEach(item => {
-                    if (e.detail.value.includes(item.value)) {
-                        selectedNames.push(item.name)
-                    }
-                })
-                uni.showToast({
-                    icon: 'none',
-                    title: '当前选中:' + selectedNames.join(',')
-                })
-            },
-            testChange: function (e : CheckboxGroupChangeEvent) {
-                this.value = e.detail.value
-            }
-        }
+        {
+          value: 'USA',
+          name: '美国',
+          checked: false,
+        },
+        {
+          value: 'BRA',
+          name: '巴西',
+          checked: false,
+        },
+        {
+          value: 'JPN',
+          name: '日本',
+          checked: false,
+        },
+        {
+          value: 'ENG',
+          name: '英国',
+          checked: false,
+        },
+        {
+          value: 'FRA',
+          name: '法国',
+          checked: false,
+        },
+      ] as ItemType[],
+
+      text: '未选中',
+      wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
+      value: [] as string[],
+      disabled: true,
+      checked: true,
+      color: '#007aff',
     }
+  },
+  methods: {
+    checkboxChange: function (e: CheckboxGroupChangeEvent) {
+      const selectedNames: string[] = []
+      this.items.forEach((item) => {
+        if (e.detail.value.includes(item.value)) {
+          selectedNames.push(item.name)
+        }
+      })
+      uni.showToast({
+        icon: 'none',
+        title: '当前选中:' + selectedNames.join(','),
+      })
+    },
+    testChange: function (e: CheckboxGroupChangeEvent) {
+      this.value = e.detail.value
+    },
+  },
+}
 </script>
 
 <style>
-    .uni-list-cell {
-        justify-content: flex-start
-    }
-</style>
\ No newline at end of file
+.uni-list-cell {
+  justify-content: flex-start;
+}
+</style>
diff --git a/pages/component/input/input.uvue b/pages/component/input/input.uvue
index 6c1ae1867a6fd22cede6d3be1e5cd4c284777946..f2472eb72101ef1adb6b90324025f8710eb16f63 100644
--- a/pages/component/input/input.uvue
+++ b/pages/component/input/input.uvue
@@ -1,202 +1,307 @@
 <template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
     <view class="nvue-page-root">
-        <page-head :title="title"></page-head>
-        <view class="uni-common-mt">
-            <view class="uni-form-item uni-column">
-                <view class="title"><text class="uni-form-item__title">可自动聚焦的 input</text></view>
-                <view class="uni-input-wrapper">
-                    <input class="uni-input" :focus="true" placeholder="自动获得焦点" ref="input"/>
-                </view>
-            </view>
-            <!-- #ifdef APP-PLUS -->
-            <!-- <view v-if="platform==='ios'&&!isNvue" class="uni-form-item uni-column">
+      <page-head :title="title"></page-head>
+      <view class="uni-common-mt">
+        <view class="uni-form-item uni-column">
+          <view class="title"
+            ><text class="uni-form-item__title">可自动聚焦的 input</text></view
+          >
+          <view class="uni-input-wrapper">
+            <input
+              class="uni-input"
+              :focus="true"
+              placeholder="自动获得焦点"
+              ref="input"
+            />
+          </view>
+        </view>
+        <!-- #ifdef APP-PLUS -->
+        <!-- <view v-if="platform==='ios'&&!isNvue" class="uni-form-item uni-column">
                 <view class="title"><text class="uni-form-item__title">隐藏 iOS 软键盘上的导航条</text></view>
                 <view class="uni-input-wrapper">
                     <input class="uni-input" placeholder="触摸其他地方收起键盘" @focus="onFocus" @blur="onBlur" />
                 </view>
             </view> -->
-            <!-- #endif -->
-            <view class="uni-form-item uni-column">
-                <view class="title"><text class="uni-form-item__title">键盘右下角按钮显示为搜索</text></view>
-                <view class="uni-input-wrapper">
-                    <input class="uni-input" confirmType="search" placeholder="键盘右下角按钮显示为搜索" />
-                </view>
-            </view>
-            <!-- #ifndef H5 -->
-            <view class="uni-form-item uni-column">
-                <view class="title"><text class="uni-form-item__title">键盘右下角按钮显示为发送</text></view>
-                <view class="uni-input-wrapper">
-                    <input class="uni-input" confirmType="send" placeholder="键盘右下角按钮显示为发送" />
-                </view>
-            </view>
-            <!-- #endif -->
-            <view class="uni-form-item uni-column">
-                <view class="title"><text class="uni-form-item__title">控制最大输入长度的 input</text></view>
-                <view class="uni-input-wrapper">
-                    <input class="uni-input" :maxlength="10" placeholder="最大输入长度为10" />
-                </view>
-            </view>
-            <view class="uni-form-item uni-column">
-                <view class="title"><text class="uni-form-item__title">实时获取输入值：{{inputValue}}</text></view>
-                <view class="uni-input-wrapper">
-                    <input class="uni-input" @input="onKeyInput" placeholder="输入同步到view中" />
-                </view>
-            </view>
-            <view class="uni-form-item uni-column">
-                <view class="title"><text class="uni-form-item__title">控制输入的 input</text></view>
-                <view class="uni-input-wrapper">
-                    <input class="uni-input" @input="replaceInput" :value="changeValue" placeholder="连续的两个1会变成2" />
-                </view>
-            </view>
-            <!-- #ifndef MP-BAIDU -->
-            <!-- <view class="uni-form-item uni-column">
+        <!-- #endif -->
+        <view class="uni-form-item uni-column">
+          <view class="title"
+            ><text class="uni-form-item__title"
+              >键盘右下角按钮显示为搜索</text
+            ></view
+          >
+          <view class="uni-input-wrapper">
+            <input
+              class="uni-input"
+              confirmType="search"
+              placeholder="键盘右下角按钮显示为搜索"
+            />
+          </view>
+        </view>
+        <!-- #ifndef H5 -->
+        <view class="uni-form-item uni-column">
+          <view class="title"
+            ><text class="uni-form-item__title"
+              >键盘右下角按钮显示为发送</text
+            ></view
+          >
+          <view class="uni-input-wrapper">
+            <input
+              class="uni-input"
+              confirmType="send"
+              placeholder="键盘右下角按钮显示为发送"
+            />
+          </view>
+        </view>
+        <!-- #endif -->
+        <view class="uni-form-item uni-column">
+          <view class="title"
+            ><text class="uni-form-item__title"
+              >控制最大输入长度的 input</text
+            ></view
+          >
+          <view class="uni-input-wrapper">
+            <input
+              class="uni-input"
+              :maxlength="10"
+              placeholder="最大输入长度为10"
+            />
+          </view>
+        </view>
+        <view class="uni-form-item uni-column">
+          <view class="title"
+            ><text class="uni-form-item__title"
+              >实时获取输入值：{{ inputValue }}</text
+            ></view
+          >
+          <view class="uni-input-wrapper">
+            <input
+              class="uni-input"
+              @input="onKeyInput"
+              placeholder="输入同步到view中"
+            />
+          </view>
+        </view>
+        <view class="uni-form-item uni-column">
+          <view class="title"
+            ><text class="uni-form-item__title">控制输入的 input</text></view
+          >
+          <view class="uni-input-wrapper">
+            <input
+              class="uni-input"
+              @input="replaceInput"
+              :value="changeValue"
+              placeholder="连续的两个1会变成2"
+            />
+          </view>
+        </view>
+        <!-- #ifndef MP-BAIDU -->
+        <!-- <view class="uni-form-item uni-column">
                 <view class="title"><text class="uni-form-item__title">控制键盘的 input</text></view>
                 <view class="uni-input-wrapper">
                     <input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="输入123自动收起键盘" />
                 </view>
             </view> -->
-            <!-- #endif -->
-            <view class="uni-form-item uni-column">
-                <view class="title"><text class="uni-form-item__title">数字输入的 input</text></view>
-                <view class="uni-input-wrapper">
-                    <input class="uni-input" type="number" placeholder="这是一个数字输入框" />
-                </view>
-            </view>
-            <view class="uni-form-item uni-column">
-                <view class="title"><text class="uni-form-item__title">密码输入的 input</text></view>
-                <view class="uni-input-wrapper">
-                    <input class="uni-input" :password="true" type="text" placeholder="这是一个密码输入框" />
-                </view>
-            </view>
-            <view class="uni-form-item uni-column">
-                <view class="title"><text class="uni-form-item__title">带小数点的 input</text></view>
-                <view class="uni-input-wrapper">
-                    <input class="uni-input" type="digit" placeholder="带小数点的数字键盘" />
-                </view>
-            </view>
-            <!-- <view class="uni-form-item uni-column">
+        <!-- #endif -->
+        <view class="uni-form-item uni-column">
+          <view class="title"
+            ><text class="uni-form-item__title">数字输入的 input</text></view
+          >
+          <view class="uni-input-wrapper">
+            <input
+              class="uni-input"
+              type="number"
+              placeholder="这是一个数字输入框"
+            />
+          </view>
+        </view>
+        <view class="uni-form-item uni-column">
+          <view class="title"
+            ><text class="uni-form-item__title">密码输入的 input</text></view
+          >
+          <view class="uni-input-wrapper">
+            <input
+              class="uni-input"
+              :password="true"
+              type="text"
+              placeholder="这是一个密码输入框"
+            />
+          </view>
+        </view>
+        <view class="uni-form-item uni-column">
+          <view class="title"
+            ><text class="uni-form-item__title">带小数点的 input</text></view
+          >
+          <view class="uni-input-wrapper">
+            <input
+              class="uni-input"
+              type="digit"
+              placeholder="带小数点的数字键盘"
+            />
+          </view>
+        </view>
+        <!-- <view class="uni-form-item uni-column">
                 <view class="title"><text class="uni-form-item__title">身份证输入的 input</text></view>
                 <view class="uni-input-wrapper">
                     <input class="uni-input" type="idcard" placeholder="身份证输入键盘" /> </view>
             </view> -->
-            <view class="uni-form-item uni-column">
-                <view class="title"><text class="uni-form-item__title">控制占位符颜色的 input</text></view>
-                <view class="uni-input-wrapper">
-                    <input class="uni-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
-                </view>
-            </view>
-            <view class="uni-form-item uni-column">
-                <view class="title"><text class="uni-form-item__title">带清除按钮的输入框</text></view>
-                <view class="uni-input-wrapper">
-                    <input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
-                    <image class="uni-icon" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon"></image>
-                </view>
-            </view> 
-            <view class="uni-form-item uni-column">
-                <view class="title"><text class="uni-form-item__title">可查看密码的输入框</text></view>
-                <view class="uni-input-wrapper">
-                    <input class="uni-input" placeholder="请输入密码" :password="showPassword" />
-                    <image class="uni-icon" :src="!showPassword ? '/static/icons/eye-active.png': '/static/icons/eye.png'" @click="changePassword"></image>
-                </view>
-            </view>
+        <view class="uni-form-item uni-column">
+          <view class="title"
+            ><text class="uni-form-item__title"
+              >控制占位符颜色的 input</text
+            ></view
+          >
+          <view class="uni-input-wrapper">
+            <input
+              class="uni-input"
+              placeholder-style="color:#F76260"
+              placeholder="占位符字体是红色的"
+            />
+          </view>
+        </view>
+        <view class="uni-form-item uni-column">
+          <view class="title"
+            ><text class="uni-form-item__title">带清除按钮的输入框</text></view
+          >
+          <view class="uni-input-wrapper">
+            <input
+              class="uni-input"
+              placeholder="带清除按钮的输入框"
+              :value="inputClearValue"
+              @input="clearInput"
+            />
+            <image
+              class="uni-icon"
+              src="/static/icons/clear.png"
+              v-if="showClearIcon"
+              @click="clearIcon"
+            ></image>
+          </view>
         </view>
+        <view class="uni-form-item uni-column">
+          <view class="title"
+            ><text class="uni-form-item__title">可查看密码的输入框</text></view
+          >
+          <view class="uni-input-wrapper">
+            <input
+              class="uni-input"
+              placeholder="请输入密码"
+              :password="showPassword"
+            />
+            <image
+              class="uni-icon"
+              :src="
+                !showPassword
+                  ? '/static/icons/eye-active.png'
+                  : '/static/icons/eye.png'
+              "
+              @click="changePassword"
+            ></image>
+          </view>
+        </view>
+      </view>
     </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 <script lang="ts">
-    export default {
-        data() {
-            return {
-                title: 'input',
-                focus: false,
-                inputValue: '',
-                showClearIcon: false,
-                inputClearValue: '',
-                changeValue: '',
-                showPassword: true
-            }
-        },
-        onReady() {
-          // TODO auto focus
-          // (this.$refs['input'] as INode).focus();
-        },
-        methods: {
-            onKeyInput: function (event : InputEvent) {
-                this.inputValue = event.detail.value
-            },
-            replaceInput: function (event : InputEvent) {
-                var value = event.detail.value;
-                if (value == '11') {
-                    this.changeValue = '2';
-                }
-            },
-            clearInput: function(event: InputEvent) {
-                this.inputClearValue = event.detail.value;
-                if (event.detail.value.length > 0) {
-                    this.showClearIcon = true;
-                } else {
-                    this.showClearIcon = false;
-                }
-            },
-            clearIcon: function() {
-                this.inputClearValue = '';
-                this.showClearIcon = false;
-            },
-            changePassword: function() {
-                this.showPassword = !this.showPassword;
-            },
-            // hideKeyboard: function(event: InputEvent) {
-            //     if (event.detail.value === '123') {
-            //         uni.hideKeyboard();
-            //     }
-            // },
-            // onFocus() {
-            //     this.$mp.page.$getAppWebview().setStyle({
-            //         softinputNavBar: 'none'
-            //     })
-            // },
-            // onBlur() {
-            //     this.$mp.page.$getAppWebview().setStyle({
-            //         softinputNavBar: 'auto'
-            //     })
-            // }
-        }
+export default {
+  data() {
+    return {
+      title: 'input',
+      focus: false,
+      inputValue: '',
+      showClearIcon: false,
+      inputClearValue: '',
+      changeValue: '',
+      showPassword: true,
     }
+  },
+  onReady() {
+    // TODO auto focus
+    // (this.$refs['input'] as INode).focus();
+  },
+  methods: {
+    onKeyInput: function (event: InputEvent) {
+      this.inputValue = event.detail.value
+    },
+    replaceInput: function (event: InputEvent) {
+      var value = event.detail.value
+      if (value == '11') {
+        this.changeValue = '2'
+      }
+    },
+    clearInput: function (event: InputEvent) {
+      this.inputClearValue = event.detail.value
+      if (event.detail.value.length > 0) {
+        this.showClearIcon = true
+      } else {
+        this.showClearIcon = false
+      }
+    },
+    clearIcon: function () {
+      this.inputClearValue = ''
+      this.showClearIcon = false
+    },
+    changePassword: function () {
+      this.showPassword = !this.showPassword
+    },
+    // hideKeyboard: function(event: InputEvent) {
+    //     if (event.detail.value === '123') {
+    //         uni.hideKeyboard();
+    //     }
+    // },
+    // onFocus() {
+    //     this.$mp.page.$getAppWebview().setStyle({
+    //         softinputNavBar: 'none'
+    //     })
+    // },
+    // onBlur() {
+    //     this.$mp.page.$getAppWebview().setStyle({
+    //         softinputNavBar: 'auto'
+    //     })
+    // }
+  },
+}
 </script>
 
 <style scoped>
-    .nvue-page-root {
-        background-color: #F8F8F8;
-        padding-bottom: 20px;
-    }
+.nvue-page-root {
+  background-color: #f8f8f8;
+  padding-bottom: 20px;
+}
 
-    .title {
-        padding: 5px 13px;
-    }
+.title {
+  padding: 5px 13px;
+}
 
-    .uni-form-item__title {
-        font-size: 16px;
-        line-height: 24px;
-    }
+.uni-form-item__title {
+  font-size: 16px;
+  line-height: 24px;
+}
 
-    .uni-input-wrapper {
-        display: flex;
-        padding: 8px 13px;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        background-color: #FFFFFF;
-    }
+.uni-input-wrapper {
+  display: flex;
+  padding: 8px 13px;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  background-color: #ffffff;
+}
 
-    .uni-input {
-        height: 28px;
-        line-height: 28px;
-        font-size: 15px;
-        padding: 0px;
-        flex: 1;
-        background-color: #FFFFFF;
-    }
+.uni-input {
+  height: 28px;
+  line-height: 28px;
+  font-size: 15px;
+  padding: 0px;
+  flex: 1;
+  background-color: #ffffff;
+}
 
-    .uni-icon {
-        width: 24px;
-        height: 24px;
-    }
-</style>
\ No newline at end of file
+.uni-icon {
+  width: 24px;
+  height: 24px;
+}
+</style>
diff --git a/pages/component/radio/radio.uvue b/pages/component/radio/radio.uvue
index c431801fb7fe6d927cb7afcb80b0fa7afb6f8acd..726c1a367205ffe1795602134f4f50d139db1676 100644
--- a/pages/component/radio/radio.uvue
+++ b/pages/component/radio/radio.uvue
@@ -1,118 +1,148 @@
 <template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
     <view>
-        <page-head :title="title"></page-head>
-        <view class="uni-padding-wrap">
-            <view class="uni-title uni-common-mt">
-                <text class="uni-title-text">
-                    默认样式
-                </text>
-            </view>
-            <radio-group class="uni-flex uni-row radio-group" @change="testChange" style="flex-wrap: wrap;">
-                <radio value="r" :checked="checked" :color="color" style="margin-right: 30rpx;" class="radio r">选中
-                </radio>
-                <radio value="r1" style="margin-right: 30rpx;" class="radio r1">{{text}}</radio>
-                <radio value="r2" :disabled="disabled" class="radio r2">禁用</radio>
-                <radio value="r3" class="radio r3" style="margin-top: 20rpx;">{{wrapText}}</radio>
-            </radio-group>
+      <page-head :title="title"></page-head>
+      <view class="uni-padding-wrap">
+        <view class="uni-title uni-common-mt">
+          <text class="uni-title-text"> 默认样式 </text>
         </view>
+        <radio-group
+          class="uni-flex uni-row radio-group"
+          @change="testChange"
+          style="flex-wrap: wrap"
+        >
+          <radio
+            value="r"
+            :checked="checked"
+            :color="color"
+            style="margin-right: 30rpx"
+            class="radio r"
+            >选中
+          </radio>
+          <radio value="r1" style="margin-right: 30rpx" class="radio r1">{{
+            text
+          }}</radio>
+          <radio value="r2" :disabled="disabled" class="radio r2">禁用</radio>
+          <radio value="r3" class="radio r3" style="margin-top: 20rpx">{{
+            wrapText
+          }}</radio>
+        </radio-group>
+      </view>
 
-        <view class="uni-padding-wrap">
-            <view class="uni-title uni-common-mt">
-                <text class="uni-title-text">
-                    不同颜色和尺寸的radio
-                </text>
-            </view>
-            <radio-group class="uni-flex uni-row radio-group">
-                <radio value="r1" :checked="true" color="#FFCC33" style="transform:scale(0.7); margin-right: 30rpx;"
-                    class="radio">选中
-                </radio>
-                <radio value="r2" color="#FFCC33" style="transform:scale(0.7)" class="radio">未选中</radio>
-            </radio-group>
+      <view class="uni-padding-wrap">
+        <view class="uni-title uni-common-mt">
+          <text class="uni-title-text"> 不同颜色和尺寸的radio </text>
         </view>
+        <radio-group class="uni-flex uni-row radio-group">
+          <radio
+            value="r1"
+            :checked="true"
+            color="#FFCC33"
+            style="transform: scale(0.7); margin-right: 30rpx"
+            class="radio"
+            >选中
+          </radio>
+          <radio
+            value="r2"
+            color="#FFCC33"
+            style="transform: scale(0.7)"
+            class="radio"
+            >未选中</radio
+          >
+        </radio-group>
+      </view>
 
-        <view class="uni-padding-wrap">
-            <view class="uni-title uni-common-mt">
-                <text class="uni-title-text">
-                    推荐展示样式
-                </text>
-            </view>
-        </view>
-        <view class="uni-list uni-common-pl">
-            <radio-group @change="radioChange" class="radio-group">
-                <radio class="uni-list-cell uni-list-cell-pd radio" v-for="(item, index) in items" :key="item.value"
-                    :class="index < items.length - 1 ? 'uni-list-cell-line': ''" :value="item.value"
-                    :checked="index === current">
-                    {{item.name}}
-                </radio>
-            </radio-group>
+      <view class="uni-padding-wrap">
+        <view class="uni-title uni-common-mt">
+          <text class="uni-title-text"> 推荐展示样式 </text>
         </view>
+      </view>
+      <view class="uni-list uni-common-pl">
+        <radio-group @change="radioChange" class="radio-group">
+          <radio
+            class="uni-list-cell uni-list-cell-pd radio"
+            v-for="(item, index) in items"
+            :key="item.value"
+            :class="index < items.length - 1 ? 'uni-list-cell-line' : ''"
+            :value="item.value"
+            :checked="index === current"
+          >
+            {{ item.name }}
+          </radio>
+        </radio-group>
+      </view>
     </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 <script lang="ts">
-    type ItemType = {
-        value : string,
-        name : string,
-    }
-    export default {
-        data() {
-            return {
-                title: 'radio 单选框',
-                items: [
-                    {
-                        value: 'CHN',
-                        name: '中国'
-                    },
-                    {
-                        value: 'USA',
-                        name: '美国'
-                    },
-
-                    {
-                        value: 'BRA',
-                        name: '巴西'
-                    },
-                    {
-                        value: 'JPN',
-                        name: '日本'
-                    },
-                    {
-                        value: 'ENG',
-                        name: '英国'
-                    },
-                    {
-                        value: 'FRA',
-                        name: '法国'
-                    },
-                ] as ItemType[],
-                current: 0,
+type ItemType = {
+  value: string
+  name: string
+}
+export default {
+  data() {
+    return {
+      title: 'radio 单选框',
+      items: [
+        {
+          value: 'CHN',
+          name: '中国',
+        },
+        {
+          value: 'USA',
+          name: '美国',
+        },
 
-                value: '',
-                text: '未选中',
-                wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
-                disabled: true,
-                checked: true,
-                color: '#007aff'
-            }
+        {
+          value: 'BRA',
+          name: '巴西',
         },
-        methods: {
-            radioChange(e : RadioGroupChangeEvent) {
-                const selected = this.items.find((item) : boolean => {
-                    return item.value == e.detail.value
-                })
-                uni.showToast({
-                    icon: 'none',
-                    title: '当前选中:' + selected?.name
-                })
-            },
-            testChange(e : RadioGroupChangeEvent) {
-                this.value = e.detail.value
-            }
-        }
+        {
+          value: 'JPN',
+          name: '日本',
+        },
+        {
+          value: 'ENG',
+          name: '英国',
+        },
+        {
+          value: 'FRA',
+          name: '法国',
+        },
+      ] as ItemType[],
+      current: 0,
+
+      value: '',
+      text: '未选中',
+      wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
+      disabled: true,
+      checked: true,
+      color: '#007aff',
     }
+  },
+  methods: {
+    radioChange(e: RadioGroupChangeEvent) {
+      const selected = this.items.find((item): boolean => {
+        return item.value == e.detail.value
+      })
+      uni.showToast({
+        icon: 'none',
+        title: '当前选中:' + selected?.name,
+      })
+    },
+    testChange(e: RadioGroupChangeEvent) {
+      this.value = e.detail.value
+    },
+  },
+}
 </script>
 
 <style>
-    .uni-list-cell {
-        justify-content: flex-start
-    }
-</style>
\ No newline at end of file
+.uni-list-cell {
+  justify-content: flex-start;
+}
+</style>
diff --git a/pages/component/scroll-view/scroll-view.uvue b/pages/component/scroll-view/scroll-view.uvue
index 66f005d7c9f2843214490efdaea5bea74cc64c91..7362a137b6fe6d63c9129a01311532f5bf6d7039 100644
--- a/pages/component/scroll-view/scroll-view.uvue
+++ b/pages/component/scroll-view/scroll-view.uvue
@@ -1,112 +1,148 @@
 <template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
     <view>
-        <page-head title="scroll-view,区域滚动视图"></page-head>
-        <view class="uni-padding-wrap uni-common-mt">
-            <view class="uni-title uni-common-mt">
-                <text class="uni-title-text">Vertical Scroll</text>
-                <text class="uni-subtitle-text">纵向滚动</text>
-            </view>
-            <view>
-                <scroll-view :scrollTop="scrollTop" :scrollY="true" class="scroll-Y" scroll-with-animation="true"
-				@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
-                    <view id="demo1" class="scroll-view-item uni-bg-red"><text class="text">A</text></view>
-                    <view id="demo2" class="scroll-view-item uni-bg-green"><text class="text">B</text></view>
-                    <view id="demo3" class="scroll-view-item uni-bg-blue"><text class="text">C</text></view>
-                </scroll-view>
-            </view>
-            <view @tap="goTop" class="uni-center uni-common-mt">
-                <text class="uni-link">点击这里返回顶部</text>
-            </view>
+      <page-head title="scroll-view,区域滚动视图"></page-head>
+      <view class="uni-padding-wrap uni-common-mt">
+        <view class="uni-title uni-common-mt">
+          <text class="uni-title-text">Vertical Scroll</text>
+          <text class="uni-subtitle-text">纵向滚动</text>
+        </view>
+        <view>
+          <scroll-view
+            :scrollTop="scrollTop"
+            :scrollY="true"
+            class="scroll-Y"
+            scroll-with-animation="true"
+            @scrolltoupper="upper"
+            @scrolltolower="lower"
+            @scroll="scroll"
+          >
+            <view id="demo1" class="scroll-view-item uni-bg-red"
+              ><text class="text">A</text></view
+            >
+            <view id="demo2" class="scroll-view-item uni-bg-green"
+              ><text class="text">B</text></view
+            >
+            <view id="demo3" class="scroll-view-item uni-bg-blue"
+              ><text class="text">C</text></view
+            >
+          </scroll-view>
+        </view>
+        <view @tap="goTop" class="uni-center uni-common-mt">
+          <text class="uni-link">点击这里返回顶部</text>
+        </view>
 
-			<view class="uni-title uni-common-mt">
-				<text class="uni-subtitle-text">下拉刷新</text>
-			</view>
-			<button type="primary" class="button default-button" @click="gotoRefresher">跳转"下拉刷新示例"</button>
-			
-            <view class="uni-title uni-common-mt">
-                <text class="uni-title-text">Horizontal Scroll</text>
-                <text class="uni-subtitle-text">横向滚动</text>
-            </view>
-            <view>
-                <scroll-view class="scroll-view_H" :scrollX="true" @scroll="scroll" :scrollLeft="120">
-                    <view id="demo1" class="scroll-view-item_H uni-bg-red"><text class="text">A</text></view>
-                    <view id="demo2" class="scroll-view-item_H uni-bg-green"><text class="text">B</text></view>
-                    <view id="demo3" class="scroll-view-item_H uni-bg-blue"><text class="text">C</text></view>
-                </scroll-view>
-            </view>
-            <view class="uni-common-pb"></view>
+        <view class="uni-title uni-common-mt">
+          <text class="uni-subtitle-text">下拉刷新</text>
+        </view>
+        <button
+          type="primary"
+          class="button default-button"
+          @click="gotoRefresher"
+        >
+          跳转"下拉刷新示例"
+        </button>
+
+        <view class="uni-title uni-common-mt">
+          <text class="uni-title-text">Horizontal Scroll</text>
+          <text class="uni-subtitle-text">横向滚动</text>
+        </view>
+        <view>
+          <scroll-view
+            class="scroll-view_H"
+            :scrollX="true"
+            @scroll="scroll"
+            :scrollLeft="120"
+          >
+            <view id="demo1" class="scroll-view-item_H uni-bg-red"
+              ><text class="text">A</text></view
+            >
+            <view id="demo2" class="scroll-view-item_H uni-bg-green"
+              ><text class="text">B</text></view
+            >
+            <view id="demo3" class="scroll-view-item_H uni-bg-blue"
+              ><text class="text">C</text></view
+            >
+          </scroll-view>
         </view>
+        <view class="uni-common-pb"></view>
+      </view>
     </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 <script lang="ts">
-	import ScrollEvent from 'io.dcloud.uniapp.runtime.ScrollEvent';
-	import ScrollToLowerEvent from 'io.dcloud.uniapp.runtime.ScrollToLowerEvent';
-	import ScrollToUpperEvent from 'io.dcloud.uniapp.runtime.ScrollToUpperEvent';
-    export default {
-        data() {
-            return {
-                scrollTop: 0,
-                oldScrollTop: 0
-            }
-        },
-        methods: {
-            upper: function (e : ScrollToUpperEvent) {
-                console.log(e)
-            },
-            lower: function (e : ScrollToLowerEvent) {
-                console.log(e)
-            },
-            scroll: function (e : ScrollEvent) {
-                this.oldScrollTop = e.detail.scrollTop
-            },
-            goTop: function () {
-                // 解决view层不同步的问题
-                this.scrollTop = this.oldScrollTop
-                this.$nextTick(function () {
-                    this.scrollTop = 0
-                });
-                uni.showToast({
-                    icon: "none",
-                    title: "纵向滚动 scrollTop 值已被修改为 0"
-                })
-            },
-			gotoRefresher: function () {
-				uni.navigateTo({
-					url:"/pages/component/scroll-view/scroll-view-refresher"
-				})
-			}
-        }
+import ScrollEvent from 'io.dcloud.uniapp.runtime.ScrollEvent'
+import ScrollToLowerEvent from 'io.dcloud.uniapp.runtime.ScrollToLowerEvent'
+import ScrollToUpperEvent from 'io.dcloud.uniapp.runtime.ScrollToUpperEvent'
+export default {
+  data() {
+    return {
+      scrollTop: 0,
+      oldScrollTop: 0,
     }
+  },
+  methods: {
+    upper: function (e: ScrollToUpperEvent) {
+      console.log(e)
+    },
+    lower: function (e: ScrollToLowerEvent) {
+      console.log(e)
+    },
+    scroll: function (e: ScrollEvent) {
+      this.oldScrollTop = e.detail.scrollTop
+    },
+    goTop: function () {
+      // 解决view层不同步的问题
+      this.scrollTop = this.oldScrollTop
+      this.$nextTick(function () {
+        this.scrollTop = 0
+      })
+      uni.showToast({
+        icon: 'none',
+        title: '纵向滚动 scrollTop 值已被修改为 0',
+      })
+    },
+    gotoRefresher: function () {
+      uni.navigateTo({
+        url: '/pages/component/scroll-view/scroll-view-refresher',
+      })
+    },
+  },
+}
 </script>
 
 <style>
-    .scroll-Y {
-        height: 300rpx;
-    }
+.scroll-Y {
+  height: 300rpx;
+}
 
-    .scroll-view_H {
-        width: 100%;
-        flex-direction: row;
-    }
+.scroll-view_H {
+  width: 100%;
+  flex-direction: row;
+}
 
-    .scroll-view-item {
-        height: 300rpx;
-        justify-content: center;
-        align-items: center;
-    }
+.scroll-view-item {
+  height: 300rpx;
+  justify-content: center;
+  align-items: center;
+}
 
-    .scroll-view-item_H {
-        width: 690rpx;
-        height: 300rpx;
-        justify-content: center;
-        align-items: center;
-    }
+.scroll-view-item_H {
+  width: 690rpx;
+  height: 300rpx;
+  justify-content: center;
+  align-items: center;
+}
 
-    .text {
-        font-size: 36rpx;
-        color: #ffffff;
-    }
-	.button {
-	    margin-top: 30rpx;
-	}
-</style>
\ No newline at end of file
+.text {
+  font-size: 36rpx;
+  color: #ffffff;
+}
+.button {
+  margin-top: 30rpx;
+}
+</style>
diff --git a/pages/component/slider-100/slider-100.uvue b/pages/component/slider-100/slider-100.uvue
index f9f97da5d13bfa0378a3a2d823e6a09af37e7f91..eb0922c3b135aba242efa311aff2d9a79d6e9c30 100644
--- a/pages/component/slider-100/slider-100.uvue
+++ b/pages/component/slider-100/slider-100.uvue
@@ -1,64 +1,104 @@
 <template>
-  <view class="uni-padding-wrap">
-    <slider class="first-slider" @changing="sliderChanging" :value="sliderValue"
-      :backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
-      :show-value="true" />
-    <view class="flex-row">
-      <view class="flex-fill">
-        <slider v-for="(_, index1) in 25" :key="index1" class="slider" @changing="sliderChanging" :value="sliderValue"
-          :block-size="sliderBlockSize" :show-value="true" />
-      </view>
-      <view class="flex-fill">
-        <slider v-for="(_, index2) in 25" :key="index2" class="slider" @changing="sliderChanging" :value="sliderValue"
-          :block-size="sliderBlockSize" :show-value="true" />
-      </view>
-      <view class="flex-fill">
-        <slider v-for="(_, index3) in 25" :key="index3" class="slider" @changing="sliderChanging" :value="sliderValue"
-          :block-size="sliderBlockSize" :show-value="true" />
-      </view>
-      <view class="flex-fill">
-        <slider v-for="(_, index4) in 25" :key="index4" class="slider" @changing="sliderChanging" :value="sliderValue"
-          :block-size="sliderBlockSize" :show-value="true" />
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view class="uni-padding-wrap">
+      <slider
+        class="first-slider"
+        @changing="sliderChanging"
+        :value="sliderValue"
+        :backgroundColor="sliderBackgroundColor"
+        :activeColor="sliderActiveColor"
+        :blockColor="sliderBlockColor"
+        :show-value="true"
+      />
+      <view class="flex-row">
+        <view class="flex-fill">
+          <slider
+            v-for="(_, index1) in 25"
+            :key="index1"
+            class="slider"
+            @changing="sliderChanging"
+            :value="sliderValue"
+            :block-size="sliderBlockSize"
+            :show-value="true"
+          />
+        </view>
+        <view class="flex-fill">
+          <slider
+            v-for="(_, index2) in 25"
+            :key="index2"
+            class="slider"
+            @changing="sliderChanging"
+            :value="sliderValue"
+            :block-size="sliderBlockSize"
+            :show-value="true"
+          />
+        </view>
+        <view class="flex-fill">
+          <slider
+            v-for="(_, index3) in 25"
+            :key="index3"
+            class="slider"
+            @changing="sliderChanging"
+            :value="sliderValue"
+            :block-size="sliderBlockSize"
+            :show-value="true"
+          />
+        </view>
+        <view class="flex-fill">
+          <slider
+            v-for="(_, index4) in 25"
+            :key="index4"
+            class="slider"
+            @changing="sliderChanging"
+            :value="sliderValue"
+            :block-size="sliderBlockSize"
+            :show-value="true"
+          />
+        </view>
       </view>
     </view>
-  </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
 <script lang="ts">
-  export default {
-    data() {
-      return {
-        title: 'slider 滑块 x 100',
-        sliderValue: 50,
-        sliderBlockSize: 20,
-        sliderBackgroundColor: '#000000',
-        sliderActiveColor: '#FFCC33',
-        sliderBlockColor: '#8A6DE9'
-      }
-    },
-    methods: {
-      sliderChanging(e : SliderChangeEvent) {
-        this.sliderValue = e.detail.value
-      }
+export default {
+  data() {
+    return {
+      title: 'slider 滑块 x 100',
+      sliderValue: 50,
+      sliderBlockSize: 20,
+      sliderBackgroundColor: '#000000',
+      sliderActiveColor: '#FFCC33',
+      sliderBlockColor: '#8A6DE9',
     }
-  }
+  },
+  methods: {
+    sliderChanging(e: SliderChangeEvent) {
+      this.sliderValue = e.detail.value
+    },
+  },
+}
 </script>
 
 <style>
-  .flex-row {
-    flex-direction: row;
-  }
+.flex-row {
+  flex-direction: row;
+}
 
-  .flex-fill {
-    flex: 1;
-  }
+.flex-fill {
+  flex: 1;
+}
 
-  .first-slider {
-    margin: 12px 0;
-    background-color: rgba(0, 0, 0, 0.1);
-  }
+.first-slider {
+  margin: 12px 0;
+  background-color: rgba(0, 0, 0, 0.1);
+}
 
-  .slider {
-    margin: 2px 0.5px;
-  }
-</style>
\ No newline at end of file
+.slider {
+  margin: 2px 0.5px;
+}
+</style>
diff --git a/pages/component/swiper/swiper.uvue b/pages/component/swiper/swiper.uvue
index 240e9d48aeeb14804fb30f24c23a34f0c76315b5..d0dd5525eaa23c1022be70cc52167acbfd4c75b4 100644
--- a/pages/component/swiper/swiper.uvue
+++ b/pages/component/swiper/swiper.uvue
@@ -1,201 +1,208 @@
-<template>
-	<view>
-		<page-head title="swiper,可滑动视图"></page-head>
-		<view class="uni-margin-wrap">
-			<swiper class="swiper" :vertical="verticalSelect" :indicator-dots="dotsSelect" :autoplay="autoplaySelect" :interval="intervalSelect"  :circular="circularSelect" :indicator-color="indicatorColor" :indicator-active-color="indicatorColorActive" :disable-touch="disableTouchSelect" :current="currentVal" :current-item-id="currentItemIdVal" @change="swiperChange" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
-				<swiper-item item-id="A">
-					<view class="swiper-item uni-bg-red"><text class="swiper-item-Text">A</text></view>
-				</swiper-item>
-				<swiper-item item-id="B">
-					<view class="swiper-item uni-bg-green"><text class="swiper-item-Text">B</text></view>
-				</swiper-item>
-				<swiper-item item-id="C">
-					<view class="swiper-item uni-bg-blue"><text class="swiper-item-Text">C</text></view>
-				</swiper-item>
-			</swiper>
-		</view>
-		<view class="uni-list">
-		  <view class="uni-list-cell uni-list-cell-pd">
-		    <view class="uni-list-cell-db">是否显示面板指示点</view>
-		    <switch :checked="dotsSelect" @change="dotsChange"/>
-		  </view>
-		  <view class="uni-list-cell uni-list-cell-pd">
-		    <view class="uni-list-cell-db">是否自动切换</view>
-		    <switch :checked="autoplaySelect" @change="autoplayChange"/>
-		  </view>
-		  <view class="uni-list-cell uni-list-cell-pd">
-		    <view class="uni-list-cell-db">是否循环</view>
-		    <switch :checked="circularSelect" @change="circularChange"/>
-		  </view>
-		  <view class="uni-title">间隔时间</view>
-		  <view>
-		    <slider @change="sliderChange" :value="1000" :min="500" :max="5000" :show-value="true" />
-		  </view>
-		  <view class="uni-list-cell uni-list-cell-pd">
-		    <view class="uni-list-cell-db">定制指示器颜色</view>
-		    <switch :checked="indicatorColorSelect" @change="indicatorColorChange"/>
-		  </view>
-		  <view class="uni-list-cell uni-list-cell-pd">
-		    <view class="uni-list-cell-db">纵向</view>
-		    <switch :checked="verticalSelect" @change="verticalChange"/>
-		  </view>
-		  <view class="uni-list-cell uni-list-cell-pd">
-		    <view class="uni-list-cell-db">指定current为最后一个元素</view>
-		    <switch :checked="currentSelect" @change="currentChange"/>
-		  </view>
-		  <view class="uni-list-cell uni-list-cell-pd">
-		    <view class="uni-list-cell-db">指定current-item-id为最后一个元素</view>
-		    <switch :checked="currentItemIdSelect" @change="currentItemIdChange"/>
-		  </view>
-		  <view class="uni-list-cell uni-list-cell-pd">
-		    <view class="uni-list-cell-db">禁止用户 touch 操作</view>
-		    <switch :checked="disableTouchSelect" @change="disableTouchChange"/>
-		  </view>
-		  <view class="uni-list-cell uni-list-cell-pd">
-		    <view class="uni-list-cell-db">swiperTransition 是否打印</view>
-		    <switch :checked="swiperTransitionSelect" @change="swiperTransitionChange"/>
-		  </view>
-		  <view class="uni-list-cell uni-list-cell-pd">
-		    <view class="uni-list-cell-db">swiperAnimationfinish 是否打印</view>
-		    <switch :checked="swiperAnimationfinishSelect" @change="swiperAnimationfinishChange"/>
-		  </view>
-		  <view class="uni-list-cell uni-list-cell-pd">
-		    <view class="uni-list-cell-db">swiperChange 是否打印</view>
-		    <switch :checked="swiperChangeSelect" @change="swiperChangeChange"/>
-		  </view>
-		  
-		</view>
-
-
-	</view>
-</template>
-<script>
-	export default {
-		data() {
-			return {
-				background: ['color1', 'color2', 'color3'],
-				interval: 2000,
-				dotsSelect:false,
-				autoplaySelect:false,
-				circularSelect:false,
-				indicatorColorSelect:false,
-				verticalSelect:false,
-				currentSelect:false,
-				currentItemIdSelect:false,
-				intervalSelect:1000,
-				indicatorColor:"",
-				indicatorColorActive:"",
-				currentVal:0,
-				currentItemIdVal:"",
-				disableTouchSelect:false,
-				swiperTransitionSelect:false,
-				swiperAnimationfinishSelect:false,
-				swiperChangeSelect:false
-			}
-		},
-		methods: {
-			
-			swiperChange: function (e : SwiperChangeEvent) {
-				if(this.swiperChangeSelect){
-					console.log("swiperChange")
-					console.log(e)
-				}
-			},
-			swiperTransition: function (e : SwiperTransitionEvent) {
-				if(this.swiperTransitionSelect){
-					console.log("swiperTransition")
-					console.log(e)
-				}
-			},
-			swiperAnimationfinish: function (e : SwiperAnimationFinishEvent) {
-				if(this.swiperAnimationfinishSelect){
-					console.log("swiperAnimationfinish")
-					console.log(e)
-				}
-			},
-			
-			dotsChange: function (e : SwitchChangeEvent) {
-				this.dotsSelect = e.detail.value
-			},
-			swiperTransitionChange: function (e : SwitchChangeEvent) {
-				this.swiperTransitionSelect = e.detail.value
-			},
-			swiperChangeChange: function (e : SwitchChangeEvent) {
-				this.swiperChangeSelect = e.detail.value
-			},
-			swiperAnimationfinishChange: function (e : SwitchChangeEvent) {
-				this.swiperAnimationfinishSelect = e.detail.value
-			},
-			autoplayChange: function (e : SwitchChangeEvent) {
-				this.autoplaySelect = e.detail.value
-			},
-			verticalChange: function (e : SwitchChangeEvent) {
-				this.verticalSelect = e.detail.value
-			},
-			disableTouchChange: function (e : SwitchChangeEvent) {
-				this.disableTouchSelect = e.detail.value
-			},
-			currentItemIdChange: function (e : SwitchChangeEvent) {
-				this.currentItemIdSelect = e.detail.value
-				if(this.currentItemIdSelect){
-					this.currentItemIdVal = 'C'
-				}else{
-					this.currentItemIdVal = 'A'
-				}
-			},
-			currentChange: function (e : SwitchChangeEvent) {
-				this.currentSelect = e.detail.value
-				if(this.currentSelect){
-					this.currentVal = 2
-				}else{
-					this.currentVal = 0
-				}
-				
-			},
-			circularChange: function (e : SwitchChangeEvent) {
-				this.circularSelect = e.detail.value
-				console.log(this.circularSelect)
-			},
-			sliderChange(e : SliderChangeEvent) {
-			  this.intervalSelect = e.detail.value
-			},
-			indicatorColorChange(e : SwitchChangeEvent) {
-				this.indicatorColorSelect = e.detail.value
-				if(this.indicatorColorSelect){
-					// 选择了定制指示器颜色
-					this.indicatorColor = "#ff00ff"
-					this. indicatorColorActive = "#0000ff"
-				}else{
-					// 没有选择颜色
-					this.indicatorColor = ""
-					this. indicatorColorActive = ""
-				}
-			}
-		}
-	}
-</script>
-
-<style>
-	.uni-margin-wrap {
-		width:690rpx;
-		width: 100%;;
-	}
-	.swiper {
-		height: 300rpx;
-	}
-	.swiper-item {
-		width: 100%;
-		height: 300rpx;
-		line-height: 300rpx;
-		text-align: center;
-	}
-	
-	.swiper-item-Text {
-		width: 100%;
-		text-align:center;
-		line-height: 300rpx;
-	}
-	
-	
-
-</style>
+<template>
+	<!-- #ifdef APP -->
+	<scroll-view style="flex: 1">
+		<!-- #endif -->
+		<view>
+			<page-head title="swiper,可滑动视图"></page-head>
+			<view class="uni-margin-wrap">
+				<swiper class="swiper" :vertical="verticalSelect" :indicator-dots="dotsSelect" :autoplay="autoplaySelect"
+					:interval="intervalSelect" :circular="circularSelect" :indicator-color="indicatorColor"
+					:indicator-active-color="indicatorColorActive" :disable-touch="disableTouchSelect" :current="currentVal"
+					:current-item-id="currentItemIdVal" @change="swiperChange" @transition="swiperTransition"
+					@animationfinish="swiperAnimationfinish">
+					<swiper-item item-id="A">
+						<view class="swiper-item uni-bg-red"><text class="swiper-item-Text">A</text></view>
+					</swiper-item>
+					<swiper-item item-id="B">
+						<view class="swiper-item uni-bg-green"><text class="swiper-item-Text">B</text></view>
+					</swiper-item>
+					<swiper-item item-id="C">
+						<view class="swiper-item uni-bg-blue"><text class="swiper-item-Text">C</text></view>
+					</swiper-item>
+				</swiper>
+			</view>
+			<view class="uni-list">
+				<view class="uni-list-cell uni-list-cell-pd">
+					<view class="uni-list-cell-db">是否显示面板指示点</view>
+					<switch :checked="dotsSelect" @change="dotsChange" />
+				</view>
+				<view class="uni-list-cell uni-list-cell-pd">
+					<view class="uni-list-cell-db">是否自动切换</view>
+					<switch :checked="autoplaySelect" @change="autoplayChange" />
+				</view>
+				<view class="uni-list-cell uni-list-cell-pd">
+					<view class="uni-list-cell-db">是否循环</view>
+					<switch :checked="circularSelect" @change="circularChange" />
+				</view>
+				<view class="uni-title">间隔时间</view>
+				<view>
+					<slider @change="sliderChange" :value="1000" :min="500" :max="5000" :show-value="true" />
+				</view>
+				<view class="uni-list-cell uni-list-cell-pd">
+					<view class="uni-list-cell-db">定制指示器颜色</view>
+					<switch :checked="indicatorColorSelect" @change="indicatorColorChange" />
+				</view>
+				<view class="uni-list-cell uni-list-cell-pd">
+					<view class="uni-list-cell-db">纵向</view>
+					<switch :checked="verticalSelect" @change="verticalChange" />
+				</view>
+				<view class="uni-list-cell uni-list-cell-pd">
+					<view class="uni-list-cell-db">指定current为最后一个元素</view>
+					<switch :checked="currentSelect" @change="currentChange" />
+				</view>
+				<view class="uni-list-cell uni-list-cell-pd">
+					<view class="uni-list-cell-db">指定current-item-id为最后一个元素</view>
+					<switch :checked="currentItemIdSelect" @change="currentItemIdChange" />
+				</view>
+				<view class="uni-list-cell uni-list-cell-pd">
+					<view class="uni-list-cell-db">禁止用户 touch 操作</view>
+					<switch :checked="disableTouchSelect" @change="disableTouchChange" />
+				</view>
+				<view class="uni-list-cell uni-list-cell-pd">
+					<view class="uni-list-cell-db">swiperTransition 是否打印</view>
+					<switch :checked="swiperTransitionSelect" @change="swiperTransitionChange" />
+				</view>
+				<view class="uni-list-cell uni-list-cell-pd">
+					<view class="uni-list-cell-db">swiperAnimationfinish 是否打印</view>
+					<switch :checked="swiperAnimationfinishSelect" @change="swiperAnimationfinishChange" />
+				</view>
+				<view class="uni-list-cell uni-list-cell-pd">
+					<view class="uni-list-cell-db">swiperChange 是否打印</view>
+					<switch :checked="swiperChangeSelect" @change="swiperChangeChange" />
+				</view>
+			</view>
+		</view>
+		<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				background: ['color1', 'color2', 'color3'],
+				interval: 2000,
+				dotsSelect: false,
+				autoplaySelect: false,
+				circularSelect: false,
+				indicatorColorSelect: false,
+				verticalSelect: false,
+				currentSelect: false,
+				currentItemIdSelect: false,
+				intervalSelect: 1000,
+				indicatorColor: "",
+				indicatorColorActive: "",
+				currentVal: 0,
+				currentItemIdVal: "",
+				disableTouchSelect: false,
+				swiperTransitionSelect: false,
+				swiperAnimationfinishSelect: false,
+				swiperChangeSelect: false
+			}
+		},
+		methods: {
+
+			swiperChange: function (e : SwiperChangeEvent) {
+				if (this.swiperChangeSelect) {
+					console.log("swiperChange")
+					console.log(e)
+				}
+			},
+			swiperTransition: function (e : SwiperTransitionEvent) {
+				if (this.swiperTransitionSelect) {
+					console.log("swiperTransition")
+					console.log(e)
+				}
+			},
+			swiperAnimationfinish: function (e : SwiperAnimationFinishEvent) {
+				if (this.swiperAnimationfinishSelect) {
+					console.log("swiperAnimationfinish")
+					console.log(e)
+				}
+			},
+
+			dotsChange: function (e : SwitchChangeEvent) {
+				this.dotsSelect = e.detail.value
+			},
+			swiperTransitionChange: function (e : SwitchChangeEvent) {
+				this.swiperTransitionSelect = e.detail.value
+			},
+			swiperChangeChange: function (e : SwitchChangeEvent) {
+				this.swiperChangeSelect = e.detail.value
+			},
+			swiperAnimationfinishChange: function (e : SwitchChangeEvent) {
+				this.swiperAnimationfinishSelect = e.detail.value
+			},
+			autoplayChange: function (e : SwitchChangeEvent) {
+				this.autoplaySelect = e.detail.value
+			},
+			verticalChange: function (e : SwitchChangeEvent) {
+				this.verticalSelect = e.detail.value
+			},
+			disableTouchChange: function (e : SwitchChangeEvent) {
+				this.disableTouchSelect = e.detail.value
+			},
+			currentItemIdChange: function (e : SwitchChangeEvent) {
+				this.currentItemIdSelect = e.detail.value
+				if (this.currentItemIdSelect) {
+					this.currentItemIdVal = 'C'
+				} else {
+					this.currentItemIdVal = 'A'
+				}
+			},
+			currentChange: function (e : SwitchChangeEvent) {
+				this.currentSelect = e.detail.value
+				if (this.currentSelect) {
+					this.currentVal = 2
+				} else {
+					this.currentVal = 0
+				}
+
+			},
+			circularChange: function (e : SwitchChangeEvent) {
+				this.circularSelect = e.detail.value
+				console.log(this.circularSelect)
+			},
+			sliderChange(e : SliderChangeEvent) {
+				this.intervalSelect = e.detail.value
+			},
+			indicatorColorChange(e : SwitchChangeEvent) {
+				this.indicatorColorSelect = e.detail.value
+				if (this.indicatorColorSelect) {
+					// 选择了定制指示器颜色
+					this.indicatorColor = "#ff00ff"
+					this.indicatorColorActive = "#0000ff"
+				} else {
+					// 没有选择颜色
+					this.indicatorColor = ""
+					this.indicatorColorActive = ""
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+	.uni-margin-wrap {
+		width: 690rpx;
+		width: 100%;
+		;
+	}
+
+	.swiper {
+		height: 300rpx;
+	}
+
+	.swiper-item {
+		width: 100%;
+		height: 300rpx;
+		line-height: 300rpx;
+		text-align: center;
+	}
+
+	.swiper-item-Text {
+		width: 100%;
+		text-align: center;
+		line-height: 300rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/component/view/view.uvue b/pages/component/view/view.uvue
index ffa1158f6d476f66683c38d53c71a487fad261a7..2bb870afccf4469123e5b8b8cf8fbc49fc82eed7 100644
--- a/pages/component/view/view.uvue
+++ b/pages/component/view/view.uvue
@@ -1,173 +1,280 @@
 <template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
     <view>
-        <page-head title="view"></page-head>
-        <view class="uni-padding-wrap uni-common-mt">
-            <view>
-                <text class="uni-hello-text">
-                    Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件设置flex-direction:
-                    row或column，就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。
-                </text>
-            </view>
+      <page-head title="view"></page-head>
+      <view class="uni-padding-wrap uni-common-mt">
+        <view>
+          <text class="uni-hello-text">
+            Flex是Flexible
+            Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display:
+            flex后，继续给view等容器组件设置flex-direction:
+            row或column，就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。
+          </text>
+        </view>
 
-            <view class="uni-title uni-common-mt">
-                <text class="uni-title-text">
-                    flex-direction: row
-                </text>
-                <text class="uni-subtitle-text">
-                    横向布局
-                </text>
-            </view>
-            <view class="uni-flex uni-row">
-                <view class="flex-item uni-bg-red"><text style="color: #fff;">A</text></view>
-                <view class="flex-item uni-bg-green"><text style="color: #fff;">B</text></view>
-                <view class="flex-item uni-bg-blue"><text style="color: #fff;">C</text></view>
-            </view>
+        <view class="uni-title uni-common-mt">
+          <text class="uni-title-text"> flex-direction: row </text>
+          <text class="uni-subtitle-text"> 横向布局 </text>
+        </view>
+        <view class="uni-flex uni-row">
+          <view class="flex-item uni-bg-red"
+            ><text style="color: #fff">A</text></view
+          >
+          <view class="flex-item uni-bg-green"
+            ><text style="color: #fff">B</text></view
+          >
+          <view class="flex-item uni-bg-blue"
+            ><text style="color: #fff">C</text></view
+          >
+        </view>
 
-            <view class="uni-title uni-common-mt">
-                <text class="uni-title-text">
-                    flex-direction: column
-                </text>
-                <text class="uni-subtitle-text">
-                    纵向布局
-                </text>
-            </view>
-            <view class="uni-flex uni-column">
-                <view class="flex-item flex-item-V uni-bg-red"><text style="color: #fff;">A</text></view>
-                <view class="flex-item flex-item-V uni-bg-green"><text style="color: #fff;">B</text></view>
-                <view class="flex-item flex-item-V uni-bg-blue"><text style="color: #fff;">C</text></view>
-            </view>
+        <view class="uni-title uni-common-mt">
+          <text class="uni-title-text"> flex-direction: column </text>
+          <text class="uni-subtitle-text"> 纵向布局 </text>
+        </view>
+        <view class="uni-flex uni-column">
+          <view class="flex-item flex-item-V uni-bg-red"
+            ><text style="color: #fff">A</text></view
+          >
+          <view class="flex-item flex-item-V uni-bg-green"
+            ><text style="color: #fff">B</text></view
+          >
+          <view class="flex-item flex-item-V uni-bg-blue"
+            ><text style="color: #fff">C</text></view
+          >
+        </view>
 
-            <view class="uni-title uni-common-mt">
-                <text class="uni-title-text">
-                    更多布局示例
-                </text>
-                <text class="uni-subtitle-text">
-                    flex布局演示
-                </text>
-            </view>
-            <view>
-                <view class="text-box"><text class="text">纵向布局-自动宽度</text></view>
-                <view class="text-box" style="width: 300rpx;"><text class="text">纵向布局-固定宽度</text></view>
-                <view class="text-box"><text class="text">横向布局-自动宽度</text></view>
-                <view class="text-box"><text class="text">横向布局-自动宽度</text></view>
-            </view>
-            <view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
-                <view class="text-box"><text class="text">横向布局-居中</text></view>
-                <view class="text-box"><text class="text">横向布局-居中</text></view>
-            </view>
-            <view class="uni-flex uni-row" style="-webkit-justify-content: flex-end;justify-content: flex-end;">
-                <view class="text-box"><text class="text">横向布局-居右</text></view>
-                <view class="text-box"><text class="text">横向布局-居右</text></view>
-            </view>
-            <view class="uni-flex uni-row">
-                <view class="text-box" style="-webkit-flex: 1;flex: 1;"><text class="text">横向布局-平均分布</text></view>
-                <view class="text-box" style="-webkit-flex: 1;flex: 1;"><text class="text">横向布局-平均分布</text></view>
-            </view>
-            <view class="uni-flex uni-row"
-                style="-webkit-justify-content: space-between;justify-content: space-between;">
-                <view class="text-box"><text class="text">横向布局-两端对齐</text></view>
-                <view class="text-box"><text class="text">横向布局-两端对齐</text></view>
-            </view>
-            <view class="uni-flex uni-row">
-                <view class="text-box" style="width: 200rpx;"><text class="text">固定宽度</text></view>
-                <view class="text-box" style="-webkit-flex: 1;flex: 1;"><text class="text">自动占满余量</text></view>
-            </view>
-            <view class="uni-flex uni-row">
-                <view class="text-box" style="width: 200rpx;"><text class="text">固定宽度</text></view>
-                <view class="text-box" style="-webkit-flex: 1;flex: 1;"><text class="text">自动占满</text></view>
-                <view class="text-box" style="width: 200rpx;"><text class="text">固定宽度</text></view>
-            </view>
-            <view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
-                <view class="text-box" style="width: 320rpx;"><text class="text">一行显示不全,wrap折行</text></view>
-                <view class="text-box" style="width: 320rpx;"><text class="text">一行显示不全,wrap折行</text></view>
-                <view class="text-box" style="width: 320rpx;"><text class="text">一行显示不全,wrap折行</text></view>
-            </view>
-            <view class="uni-flex uni-row">
-                <view class="text-box"
-                    style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-start;align-items: flex-start;">
-                    <text class="text" style="line-height: 70rpx;">垂直居顶</text>
-                </view>
-                <view class="text-box"
-                    style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
-                    <text class="text">垂直居中</text>
-                </view>
-                <view class="text-box"
-                    style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-end;align-items: flex-end;">
-                    <text class="text" style="line-height: 70rpx;">垂直居底</text>
-                </view>
-            </view>
+        <view class="uni-title uni-common-mt">
+          <text class="uni-title-text"> 更多布局示例 </text>
+          <text class="uni-subtitle-text"> flex布局演示 </text>
+        </view>
+        <view>
+          <view class="text-box"
+            ><text class="text">纵向布局-自动宽度</text></view
+          >
+          <view class="text-box" style="width: 300rpx"
+            ><text class="text">纵向布局-固定宽度</text></view
+          >
+          <view class="text-box"
+            ><text class="text">横向布局-自动宽度</text></view
+          >
+          <view class="text-box"
+            ><text class="text">横向布局-自动宽度</text></view
+          >
+        </view>
+        <view
+          class="uni-flex uni-row"
+          style="-webkit-justify-content: center; justify-content: center"
+        >
+          <view class="text-box"><text class="text">横向布局-居中</text></view>
+          <view class="text-box"><text class="text">横向布局-居中</text></view>
+        </view>
+        <view
+          class="uni-flex uni-row"
+          style="-webkit-justify-content: flex-end; justify-content: flex-end"
+        >
+          <view class="text-box"><text class="text">横向布局-居右</text></view>
+          <view class="text-box"><text class="text">横向布局-居右</text></view>
+        </view>
+        <view class="uni-flex uni-row">
+          <view class="text-box" style="-webkit-flex: 1; flex: 1"
+            ><text class="text">横向布局-平均分布</text></view
+          >
+          <view class="text-box" style="-webkit-flex: 1; flex: 1"
+            ><text class="text">横向布局-平均分布</text></view
+          >
+        </view>
+        <view
+          class="uni-flex uni-row"
+          style="
+            -webkit-justify-content: space-between;
+            justify-content: space-between;
+          "
+        >
+          <view class="text-box"
+            ><text class="text">横向布局-两端对齐</text></view
+          >
+          <view class="text-box"
+            ><text class="text">横向布局-两端对齐</text></view
+          >
+        </view>
+        <view class="uni-flex uni-row">
+          <view class="text-box" style="width: 200rpx"
+            ><text class="text">固定宽度</text></view
+          >
+          <view class="text-box" style="-webkit-flex: 1; flex: 1"
+            ><text class="text">自动占满余量</text></view
+          >
+        </view>
+        <view class="uni-flex uni-row">
+          <view class="text-box" style="width: 200rpx"
+            ><text class="text">固定宽度</text></view
+          >
+          <view class="text-box" style="-webkit-flex: 1; flex: 1"
+            ><text class="text">自动占满</text></view
+          >
+          <view class="text-box" style="width: 200rpx"
+            ><text class="text">固定宽度</text></view
+          >
+        </view>
+        <view
+          class="uni-flex uni-row"
+          style="-webkit-flex-wrap: wrap; flex-wrap: wrap"
+        >
+          <view class="text-box" style="width: 320rpx"
+            ><text class="text">一行显示不全,wrap折行</text></view
+          >
+          <view class="text-box" style="width: 320rpx"
+            ><text class="text">一行显示不全,wrap折行</text></view
+          >
+          <view class="text-box" style="width: 320rpx"
+            ><text class="text">一行显示不全,wrap折行</text></view
+          >
+        </view>
+        <view class="uni-flex uni-row">
+          <view
+            class="text-box"
+            style="
+              -webkit-flex: 1;
+              flex: 1;
+              height: 200rpx;
+              -webkit-justify-content: center;
+              justify-content: center;
+              -webkit-align-items: flex-start;
+              align-items: flex-start;
+            "
+          >
+            <text class="text" style="line-height: 70rpx">垂直居顶</text>
+          </view>
+          <view
+            class="text-box"
+            style="
+              -webkit-flex: 1;
+              flex: 1;
+              height: 200rpx;
+              -webkit-justify-content: center;
+              justify-content: center;
+              -webkit-align-items: center;
+              align-items: center;
+            "
+          >
+            <text class="text">垂直居中</text>
+          </view>
+          <view
+            class="text-box"
+            style="
+              -webkit-flex: 1;
+              flex: 1;
+              height: 200rpx;
+              -webkit-justify-content: center;
+              justify-content: center;
+              -webkit-align-items: flex-end;
+              align-items: flex-end;
+            "
+          >
+            <text class="text" style="line-height: 70rpx">垂直居底</text>
+          </view>
+        </view>
 
-            <view class="uni-title uni-common-mt">
-                <text class="uni-title-text">
-                    组合示例
-                </text>
-                <text class="uni-subtitle-text">
-                    flex布局演示
-                </text>
+        <view class="uni-title uni-common-mt">
+          <text class="uni-title-text"> 组合示例 </text>
+          <text class="uni-subtitle-text"> flex布局演示 </text>
+        </view>
+        <view class="uni-flex uni-row">
+          <view
+            class="text-box uni-flex"
+            style="
+              width: 200rpx;
+              height: 220rpx;
+              -webkit-justify-content: center;
+              justify-content: center;
+              -webkit-align-items: center;
+              align-items: center;
+            "
+          >
+            <image
+              src="/static/plus.png"
+              style="width: 150rpx; height: 150rpx"
+            ></image>
+          </view>
+          <view
+            class="uni-flex uni-column"
+            style="
+              -webkit-flex: 1;
+              flex: 1;
+              -webkit-justify-content: space-between;
+              justify-content: space-between;
+            "
+          >
+            <view
+              class="text-box"
+              style="
+                height: 120rpx;
+                justify-content: start;
+                align-items: start;
+                padding-left: 20rpx;
+              "
+            >
+              <text class="text" style="line-height: 70rpx"
+                >文字居左，留出左间距</text
+              >
             </view>
-            <view class="uni-flex uni-row">
-                <view class="text-box uni-flex"
-                    style="width: 200rpx;height: 220rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
-                    <image src="/static/plus.png" style="width: 150rpx;height: 150rpx;"></image>
-                </view>
-                <view class="uni-flex uni-column"
-                    style="-webkit-flex: 1;flex: 1;-webkit-justify-content: space-between;justify-content: space-between;">
 
-                    <view class="text-box"
-                        style="height: 120rpx;justify-content: start;align-items: start;padding-left: 20rpx;">
-                        <text class="text" style="line-height: 70rpx;">文字居左，留出左间距</text>
-                    </view>
-
-                    <view class="uni-flex uni-row">
-                        <view class="text-box" style="-webkit-flex: 1;flex: 1;">
-                            <text class="text">剩余数量</text>
-                        </view>
-                        <view class="text-box" style="-webkit-flex: 1;flex: 1;">
-                            <text class="text">立即购买</text>
-                        </view>
-                    </view>
-                </view>
+            <view class="uni-flex uni-row">
+              <view class="text-box" style="-webkit-flex: 1; flex: 1">
+                <text class="text">剩余数量</text>
+              </view>
+              <view class="text-box" style="-webkit-flex: 1; flex: 1">
+                <text class="text">立即购买</text>
+              </view>
             </view>
+          </view>
         </view>
+      </view>
     </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 <script>
-    export default {
-        data() {
-            return {}
-        }
-    }
+export default {
+  data() {
+    return {}
+  },
+}
 </script>
 
 <style>
-    .flex-item {
-        width: 33.3%;
-        height: 200rpx;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
+.flex-item {
+  width: 33.3%;
+  height: 200rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
-    .flex-item-V {
-        width: 100%;
-        height: 150rpx;
-        text-align: center;
-        line-height: 150rpx;
-    }
+.flex-item-V {
+  width: 100%;
+  height: 150rpx;
+  text-align: center;
+  line-height: 150rpx;
+}
 
-    .text-box {
-        margin: 15rpx 10rpx;
-        padding: 0 20rpx;
-        background-color: #ebebeb;
-        height: 70rpx;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: row;
-    }
+.text-box {
+  margin: 15rpx 10rpx;
+  padding: 0 20rpx;
+  background-color: #ebebeb;
+  height: 70rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
 
-    .text {
-        color: #777;
-        font-size: 26rpx;
-    }
-</style>
\ No newline at end of file
+.text {
+  color: #777;
+  font-size: 26rpx;
+}
+</style>
diff --git a/pages/tabBar/API.uvue b/pages/tabBar/API.uvue
index 8a75187e5cf1383b0a6b0c261336a4f7cc3f5ac9..d671d7a33dfbf6d35fc77cb843a9b973d5de89e7 100644
--- a/pages/tabBar/API.uvue
+++ b/pages/tabBar/API.uvue
@@ -1,516 +1,522 @@
-<template>
-  <scroll-view class="uni-container">
-    <view class="uni-header-logo">
-      <image class="uni-header-image" src="/static/apiIndex.png"></image>
-    </view>
-    <view class="uni-hello-text">
-      <text class="hello-text">以下将演示uni-app接口能力，详细文档见：</text>
-      <u-link
-        :href="'https://uniapp.dcloud.io/api/'"
-        :text="'https://uniapp.dcloud.io/api/'"
-        :inWhiteList="true"
-      ></u-link>
-    </view>
-    <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
-      <view
-        class="uni-panel-h"
-        :class="item.open ? 'uni-panel-h-on' : ''"
-        @click="triggerCollapse(index, item)"
-      >
-        <text
-          class="uni-panel-text"
-          :class="item.enable == false ? 'text-disabled' : ''"
-          >{{ item.name }}</text
-        >
-        <image
-          :src="
-            item.pages.length > 0
-              ? item.open
-                ? arrowUpIcon
-                : arrowDownIcon
-              : arrowRightIcon
-          "
-          class="uni-icon"
-        ></image>
-      </view>
-      <view class="uni-panel-c" v-if="item.open">
-        <view
-          class="uni-navigate-item"
-          v-for="(page, key) in item.pages"
-          :key="key"
-          @click="goDetailPage(page)"
-        >
-          <text
-            class="uni-navigate-text"
-            :class="page.enable == false ? 'text-disabled' : ''"
-            >{{ page.name }}</text
-          >
-          <image :src="arrowRightIcon" class="uni-icon"></image>
-        </view>
-      </view>
-    </view>
-  </scroll-view>
-</template>
-
-<script lang="ts">
-type Page = {
-  name: string
-  enable?: boolean
-  url: string
-}
-type ListItem = {
-  id: string
-  name: string
-  open: boolean
-  pages: Page[]
-  url?: string
-  enable?: boolean
-}
-export default {
-  data() {
-    return {
-      list: [
-        {
-          id: 'base',
-          name: '基础',
-          open: false,
-          pages: [
-            {
-              name: 'getApp',
-              url: 'get-app',
-            },
-            {
-              name: 'getCurrentPages',
-              url: 'get-current-pages',
-            },
-            {
-              name: '事件总线event-bus',
-              url: 'event-bus',
-            },
-            {
-              name: '获取启动参数',
-              url: 'get-launch-options-sync',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'page',
-          name: '页面',
-          open: false,
-          pages: [
-            {
-              name: '页面跳转',
-              url: 'navigator',
-            },
-            {
-              name: '页面栈管理',
-              url: 'getCurrentPages',
-              enable: false,
-            },
-            {
-              name: '设置导航条标题',
-              url: 'set-navigation-bar-title',
-              enable: false,
-            },
-            {
-              name: '设置导航条颜色',
-              url: 'set-navigation-bar-color',
-            },
-            {
-              name: '设置TabBar',
-              url: 'set-tabbar',
-              enable: false,
-            },
-            {
-              name: '下拉刷新',
-              url: 'pull-down-refresh',
-              enable: false,
-            },
-            {
-              name: '将页面滚动到指定位置',
-              url: 'page-scroll-to',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'ui',
-          name: '界面',
-          open: false,
-          pages: [
-            /* {
-				            name: "创建动画",
-				            url: "animation",
-							enable: false
-				        },
-				        {
-				            name: "创建绘画",
-				            url: "canvas",
-							enable: false
-				        },
-						{
-						    name: "节点布局交互状态",
-						    url: "intersection-observer",
-							enable: false
-						}, */
-            {
-              name: '节点信息',
-              url: 'nodes-info',
-            },
-            {
-              name: '显示操作菜单',
-              url: 'action-sheet',
-            },
-            {
-              name: '显示模态弹窗',
-              url: 'modal',
-            },
-            {
-              name: '显示加载提示框',
-              url: 'show-loading',
-            },
-            {
-              name: '显示消息提示框',
-              url: 'toast',
-            },
-            {
-              name: '动态加载字体',
-              url: 'load-font-face',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'device',
-          name: '设备',
-          open: false,
-          pages: [
-            {
-              name: '获取设备网络状态',
-              url: 'get-network-type',
-            },
-            {
-              name: '获取系统信息',
-              url: 'get-system-info',
-            },
-            {
-              name: '获取设备信息',
-              url: 'get-device-info',
-            },
-            {
-              name: '获取APP基础信息',
-              url: 'get-app-base-info',
-            },
-            {
-              name: '获取系统设置',
-              url: 'get-system-setting',
-            },
-            {
-              name: '获取APP授权设置',
-              url: 'get-app-authorize-setting',
-            },
-            {
-              name: '获取窗口信息',
-              url: 'get-window-info',
-            },
-            {
-              name: '电量',
-              url: 'get-battery-info',
-            },
-            /* {
-                            name: "打电话",
-                            url: "make-phone-call",
-                        },
-                        {
-                            name: "震动",
-                            url: "vibrate",
-                        },
-                        {
-                            name: "添加手机联系人",
-                            url: "add-phone-contact",
-                        },
-                        {
-                            name: "扫码",
-                            url: "scan-code",
-                        },
-                        {
-                            name: "剪贴板",
-                            url: "clipboard",
-                        },
-                        {
-                            name: "屏幕亮度",
-                            url: "brightness",
-                        },
-                        {
-                            name: "蓝牙",
-                            url: "bluetooth",
-                        },
-                        {
-                            name: "生物认证",
-                            url: "soter",
-                        },
-                        {
-                            name: "iBeacon",
-                            url: "ibeacon",
-                        },
-                        {
-                            name: "监听加速度传感器",
-                            url: "on-accelerometer-change",
-                        },
-                        {
-                            name: "监听罗盘数据",
-                            url: "on-compass-change",
-                        },
-                        {
-                            name: "监听距离传感器",
-                            url: "/platforms/app-plus/proximity/proximity",
-                        },
-                        {
-                            name: "监听方向传感器",
-                            url: "/platforms/app-plus/orientation/orientation",
-                        }, */
-          ] as Page[],
-        },
-        {
-          id: 'network',
-          name: '网络',
-          open: false,
-          pages: [
-            {
-              name: '发起一个请求',
-              url: 'request',
-            },
-            {
-              name: '上传文件',
-              url: 'upload-file',
-            },
-            {
-              name: '下载文件',
-              url: 'download-file',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'websocket',
-          name: 'websocket',
-          open: false,
-          pages: [
-            {
-              name: 'socketTask',
-              url: 'websocket-socketTask',
-            },
-            {
-              name: '全局websocket',
-              url: 'websocket-global',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'media',
-          name: '媒体',
-          open: false,
-          pages: [
-            {
-              name: '图片选择和预览',
-              url: 'preview-image',
-            },
-            /* {
-                            name: "图片选择和拍照",
-                            url: "image",
-							enable: false
-                        },{
-                            name: "音频",
-                            url: "inner-audio",
-                        },
-                        {
-                            name: "录音",
-                            url: "voice",
-                        },
-                        {
-                            name: "背景音频",
-                            url: "background-audio",
-                        }, 
-                        {
-                            name: "视频选择和拍照",
-                            url: "video",
-							enable: false
-                        },
-                        {
-                            name: "文件",
-                            url: "file",
-                        },
-                        {
-                            name: "保存媒体到本地",
-                            url: "save-media",
-                        }, */
-          ] as Page[],
-        },
-        {
-          id: 'location',
-          name: '位置',
-          open: false,
-          pages: [
-            {
-              name: '获取当前位置',
-              url: 'get-location',
-            },
-            /*                        {
-                            name: "使用地图查看位置",
-                            url: "open-location",
-                        },
-                        {
-                            name: "使用地图选择位置",
-                            url: "choose-location",
-                        },
-                        {
-                            name: "地图控制",
-                            url: "map",
-                        },
-                        {
-                            name: "地图搜索",
-                            url: "map-search",
-                        }, */
-          ] as Page[],
-        },
-        {
-          id: 'storage',
-          name: '存储',
-          open: false,
-          pages: [
-            {
-              name: 'storage（key-value存储）',
-              url: 'storage',
-            },
-          ] as Page[],
-        },
-        /*                {
-                    id: "rewarded-video-ad",
-                    url: "rewarded-video-ad",
-                    name: "激励视频广告",
-                    open: false,
-                    enable: false,
-                    pages: [] as Page[]
-                },
-                {
-                    id: "full-screen-video-ad",
-                    url: "full-screen-video-ad",
-                    name: "全屏视频广告",
-                    open: false,
-                    enable: false,
-                    pages: [] as Page[]
-                },
-                {
-                    id: "login",
-                    name: "登录",
-                    open: false,
-                    pages: [
-                        {
-                            name: "登录",
-                            url: "login",
-                        },
-                        {
-                            name: "获取用户信息",
-                            url: "get-user-info",
-                        },
-                    ] as Page[],
-                },
-                {
-                    id: "share",
-                    name: "分享",
-                    open: false,
-                    pages: [
-                        {
-                            name: "分享",
-                            url: "share",
-                        },
-                    ] as Page[],
-                },
-                {
-                    id: "payment",
-                    name: "支付",
-                    open: false,
-                    pages: [
-                        {
-                            name: "发起支付",
-                            url: "request-payment",
-                        },
-                    ] as Page[],
-                },
-                {
-                    id: "speech",
-                    name: "语音",
-                    open: false,
-                    pages: [
-                        {
-                            name: "语音识别",
-                            url: "/platforms/app-plus/speech/speech",
-                        },
-                    ] as Page[],
-                },
-                {
-                    id: "push",
-                    name: "推送",
-                    open: false,
-                    pages: [
-                        {
-                            name: "推送",
-                            url: "/platforms/app-plus/push/push",
-                        },
-                    ] as Page[],
-                }, */
-        {
-          id: 'exit',
-          name: '退出',
-          open: false,
-          pages: [
-            {
-              name: 'exit退出',
-              url: 'exit',
-              enable: false,
-            },
-          ] as Page[],
-        },
-      ] as ListItem[],
-      arrowUpIcon: '/static/icons/arrow-up.png',
-      arrowDownIcon: '/static/icons/arrow-down.png',
-      arrowRightIcon: '/static/icons/arrow-right.png',
-    }
-  },
-  methods: {
-    triggerCollapse(index?: number, item: ListItem) {
-      if (item.pages.length == 0) {
-        const page: Page = {
-          name: item.name,
-          enable: item.enable,
-          url: item.url!,
-        }
-        this.goDetailPage(page)
-        return
-      }
-      for (var i = 0; i < this.list.length; ++i) {
-        if (index == i) {
-          this.list[i].open = !this.list[i].open
-        } else {
-          this.list[i].open = false
-        }
-      }
-    },
-    goDetailPage(e: Page) {
-      if (e.enable == false) {
-        uni.showToast({
-          title: '暂不支持',
-          icon: 'none',
-        })
-        return
-      }
-      const url =
-        e.url.indexOf('platform') > -1 ? e.url : `/pages/API/${e.url}/${e.url}`
-      uni.navigateTo({
-        url,
-      })
-    },
-  },
-}
-</script>
-
-<style>
-@import '../../common/uni-uvue.css';
-</style>
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view class="uni-container">
+      <view class="uni-header-logo">
+        <image class="uni-header-image" src="/static/apiIndex.png"></image>
+      </view>
+      <view class="uni-hello-text">
+        <text class="hello-text">以下将演示uni-app接口能力，详细文档见：</text>
+        <u-link
+          :href="'https://uniapp.dcloud.io/api/'"
+          :text="'https://uniapp.dcloud.io/api/'"
+          :inWhiteList="true"
+        ></u-link>
+      </view>
+      <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
+        <view
+          class="uni-panel-h"
+          :class="item.open ? 'uni-panel-h-on' : ''"
+          @click="triggerCollapse(index, item)"
+        >
+          <text
+            class="uni-panel-text"
+            :class="item.enable == false ? 'text-disabled' : ''"
+            >{{ item.name }}</text
+          >
+          <image
+            :src="
+              item.pages.length > 0
+                ? item.open
+                  ? arrowUpIcon
+                  : arrowDownIcon
+                : arrowRightIcon
+            "
+            class="uni-icon"
+          ></image>
+        </view>
+        <view class="uni-panel-c" v-if="item.open">
+          <view
+            class="uni-navigate-item"
+            v-for="(page, key) in item.pages"
+            :key="key"
+            @click="goDetailPage(page)"
+          >
+            <text
+              class="uni-navigate-text"
+              :class="page.enable == false ? 'text-disabled' : ''"
+              >{{ page.name }}</text
+            >
+            <image :src="arrowRightIcon" class="uni-icon"></image>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script lang="ts">
+type Page = {
+  name: string
+  enable?: boolean
+  url: string
+}
+type ListItem = {
+  id: string
+  name: string
+  open: boolean
+  pages: Page[]
+  url?: string
+  enable?: boolean
+}
+export default {
+  data() {
+    return {
+      list: [
+        {
+          id: 'base',
+          name: '基础',
+          open: false,
+          pages: [
+            {
+              name: 'getApp',
+              url: 'get-app',
+            },
+            {
+              name: 'getCurrentPages',
+              url: 'get-current-pages',
+            },
+            {
+              name: '事件总线event-bus',
+              url: 'event-bus',
+            },
+            {
+              name: '获取启动参数',
+              url: 'get-launch-options-sync',
+            },
+          ] as Page[],
+        },
+        {
+          id: 'page',
+          name: '页面',
+          open: false,
+          pages: [
+            {
+              name: '页面跳转',
+              url: 'navigator',
+            },
+            {
+              name: '页面栈管理',
+              url: 'getCurrentPages',
+              enable: false,
+            },
+            {
+              name: '设置导航条标题',
+              url: 'set-navigation-bar-title',
+              enable: false,
+            },
+            {
+              name: '设置导航条颜色',
+              url: 'set-navigation-bar-color',
+            },
+            {
+              name: '设置TabBar',
+              url: 'set-tabbar',
+              enable: false,
+            },
+            {
+              name: '下拉刷新',
+              url: 'pull-down-refresh',
+              enable: false,
+            },
+            {
+              name: '将页面滚动到指定位置',
+              url: 'page-scroll-to',
+            },
+          ] as Page[],
+        },
+        {
+          id: 'ui',
+          name: '界面',
+          open: false,
+          pages: [
+            /* {
+											name: "创建动画",
+											url: "animation",
+								enable: false
+									},
+									{
+											name: "创建绘画",
+											url: "canvas",
+								enable: false
+									},
+							{
+									name: "节点布局交互状态",
+									url: "intersection-observer",
+								enable: false
+							}, */
+            {
+              name: '节点信息',
+              url: 'nodes-info',
+            },
+            {
+              name: '显示操作菜单',
+              url: 'action-sheet',
+            },
+            {
+              name: '显示模态弹窗',
+              url: 'modal',
+            },
+            {
+              name: '显示加载提示框',
+              url: 'show-loading',
+            },
+            {
+              name: '显示消息提示框',
+              url: 'toast',
+            },
+            {
+              name: '动态加载字体',
+              url: 'load-font-face',
+            },
+          ] as Page[],
+        },
+        {
+          id: 'device',
+          name: '设备',
+          open: false,
+          pages: [
+            {
+              name: '获取设备网络状态',
+              url: 'get-network-type',
+            },
+            {
+              name: '获取系统信息',
+              url: 'get-system-info',
+            },
+            {
+              name: '获取设备信息',
+              url: 'get-device-info',
+            },
+            {
+              name: '获取APP基础信息',
+              url: 'get-app-base-info',
+            },
+            {
+              name: '获取系统设置',
+              url: 'get-system-setting',
+            },
+            {
+              name: '获取APP授权设置',
+              url: 'get-app-authorize-setting',
+            },
+            {
+              name: '获取窗口信息',
+              url: 'get-window-info',
+            },
+            {
+              name: '电量',
+              url: 'get-battery-info',
+            },
+            /* {
+															name: "打电话",
+															url: "make-phone-call",
+													},
+													{
+															name: "震动",
+															url: "vibrate",
+													},
+													{
+															name: "添加手机联系人",
+															url: "add-phone-contact",
+													},
+													{
+															name: "扫码",
+															url: "scan-code",
+													},
+													{
+															name: "剪贴板",
+															url: "clipboard",
+													},
+													{
+															name: "屏幕亮度",
+															url: "brightness",
+													},
+													{
+															name: "蓝牙",
+															url: "bluetooth",
+													},
+													{
+															name: "生物认证",
+															url: "soter",
+													},
+													{
+															name: "iBeacon",
+															url: "ibeacon",
+													},
+													{
+															name: "监听加速度传感器",
+															url: "on-accelerometer-change",
+													},
+													{
+															name: "监听罗盘数据",
+															url: "on-compass-change",
+													},
+													{
+															name: "监听距离传感器",
+															url: "/platforms/app-plus/proximity/proximity",
+													},
+													{
+															name: "监听方向传感器",
+															url: "/platforms/app-plus/orientation/orientation",
+													}, */
+          ] as Page[],
+        },
+        {
+          id: 'network',
+          name: '网络',
+          open: false,
+          pages: [
+            {
+              name: '发起一个请求',
+              url: 'request',
+            },
+            {
+              name: '上传文件',
+              url: 'upload-file',
+            },
+            {
+              name: '下载文件',
+              url: 'download-file',
+            },
+          ] as Page[],
+        },
+        {
+          id: 'websocket',
+          name: 'websocket',
+          open: false,
+          pages: [
+            {
+              name: 'socketTask',
+              url: 'websocket-socketTask',
+            },
+            {
+              name: '全局websocket',
+              url: 'websocket-global',
+            },
+          ] as Page[],
+        },
+        {
+          id: 'media',
+          name: '媒体',
+          open: false,
+          pages: [
+            {
+              name: '图片选择和预览',
+              url: 'preview-image',
+            },
+            /* {
+															name: "图片选择和拍照",
+															url: "image",
+								enable: false
+													},{
+															name: "音频",
+															url: "inner-audio",
+													},
+													{
+															name: "录音",
+															url: "voice",
+													},
+													{
+															name: "背景音频",
+															url: "background-audio",
+													}, 
+													{
+															name: "视频选择和拍照",
+															url: "video",
+								enable: false
+													},
+													{
+															name: "文件",
+															url: "file",
+													},
+													{
+															name: "保存媒体到本地",
+															url: "save-media",
+													}, */
+          ] as Page[],
+        },
+        {
+          id: 'location',
+          name: '位置',
+          open: false,
+          pages: [
+            {
+              name: '获取当前位置',
+              url: 'get-location',
+            },
+            /*                        {
+															name: "使用地图查看位置",
+															url: "open-location",
+													},
+													{
+															name: "使用地图选择位置",
+															url: "choose-location",
+													},
+													{
+															name: "地图控制",
+															url: "map",
+													},
+													{
+															name: "地图搜索",
+															url: "map-search",
+													}, */
+          ] as Page[],
+        },
+        {
+          id: 'storage',
+          name: '存储',
+          open: false,
+          pages: [
+            {
+              name: 'storage（key-value存储）',
+              url: 'storage',
+            },
+          ] as Page[],
+        },
+        /*                {
+											id: "rewarded-video-ad",
+											url: "rewarded-video-ad",
+											name: "激励视频广告",
+											open: false,
+											enable: false,
+											pages: [] as Page[]
+									},
+									{
+											id: "full-screen-video-ad",
+											url: "full-screen-video-ad",
+											name: "全屏视频广告",
+											open: false,
+											enable: false,
+											pages: [] as Page[]
+									},
+									{
+											id: "login",
+											name: "登录",
+											open: false,
+											pages: [
+													{
+															name: "登录",
+															url: "login",
+													},
+													{
+															name: "获取用户信息",
+															url: "get-user-info",
+													},
+											] as Page[],
+									},
+									{
+											id: "share",
+											name: "分享",
+											open: false,
+											pages: [
+													{
+															name: "分享",
+															url: "share",
+													},
+											] as Page[],
+									},
+									{
+											id: "payment",
+											name: "支付",
+											open: false,
+											pages: [
+													{
+															name: "发起支付",
+															url: "request-payment",
+													},
+											] as Page[],
+									},
+									{
+											id: "speech",
+											name: "语音",
+											open: false,
+											pages: [
+													{
+															name: "语音识别",
+															url: "/platforms/app-plus/speech/speech",
+													},
+											] as Page[],
+									},
+									{
+											id: "push",
+											name: "推送",
+											open: false,
+											pages: [
+													{
+															name: "推送",
+															url: "/platforms/app-plus/push/push",
+													},
+											] as Page[],
+									}, */
+        {
+          id: 'exit',
+          name: '退出',
+          open: false,
+          pages: [
+            {
+              name: 'exit退出',
+              url: 'exit',
+              enable: false,
+            },
+          ] as Page[],
+        },
+      ] as ListItem[],
+      arrowUpIcon: '/static/icons/arrow-up.png',
+      arrowDownIcon: '/static/icons/arrow-down.png',
+      arrowRightIcon: '/static/icons/arrow-right.png',
+    }
+  },
+  methods: {
+    triggerCollapse(index?: number, item: ListItem) {
+      if (item.pages.length == 0) {
+        const page: Page = {
+          name: item.name,
+          enable: item.enable,
+          url: item.url!,
+        }
+        this.goDetailPage(page)
+        return
+      }
+      for (var i = 0; i < this.list.length; ++i) {
+        if (index == i) {
+          this.list[i].open = !this.list[i].open
+        } else {
+          this.list[i].open = false
+        }
+      }
+    },
+    goDetailPage(e: Page) {
+      if (e.enable == false) {
+        uni.showToast({
+          title: '暂不支持',
+          icon: 'none',
+        })
+        return
+      }
+      const url =
+        e.url.indexOf('platform') > -1 ? e.url : `/pages/API/${e.url}/${e.url}`
+      uni.navigateTo({
+        url,
+      })
+    },
+  },
+}
+</script>
+
+<style>
+@import '../../common/uni-uvue.css';
+</style>
diff --git a/pages/tabBar/CSS.uvue b/pages/tabBar/CSS.uvue
index edcb0a53313f2a241ae6a051ec3c9f6098a67cf4..7e1b600943e095af7d8161ec9ca024933376d431 100644
--- a/pages/tabBar/CSS.uvue
+++ b/pages/tabBar/CSS.uvue
@@ -1,370 +1,376 @@
-<template>
-  <scroll-view class="uni-container">
-    <view class="uni-header-logo">
-      <image class="uni-header-image" src="/static/cssIndex.png"></image>
-    </view>
-    <view class="uni-hello-text">
-      <text class="hello-text"
-        >uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text
-      >
-      <u-link
-        :href="'https://uniapp.dcloud.io/component/'"
-        :text="'https://uniapp.dcloud.io/component/'"
-        :inWhiteList="true"
-      ></u-link>
-    </view>
-    <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
-      <view
-        class="uni-panel-h"
-        :class="item.open ? 'uni-panel-h-on' : ''"
-        @click="triggerCollapse(index, item)"
-      >
-        <text
-          class="uni-panel-text"
-          :class="item.enable == false ? 'text-disabled' : ''"
-          >{{ item.name }}</text
-        >
-        <image
-          :src="
-            item.pages.length > 0
-              ? item.open
-                ? arrowUpIcon
-                : arrowDownIcon
-              : arrowRightIcon
-          "
-          class="uni-icon"
-        ></image>
-      </view>
-      <view class="uni-panel-c" v-if="item.open">
-        <view
-          class="uni-navigate-item"
-          v-for="(page, key) in item.pages"
-          :key="key"
-          @click="goDetailPage(page)"
-        >
-          <text
-            class="uni-navigate-text"
-            :class="page.enable == false ? 'text-disabled' : ''"
-            >{{ page.name }}</text
-          >
-          <image :src="arrowRightIcon" class="uni-icon"></image>
-        </view>
-      </view>
-    </view>
-  </scroll-view>
-</template>
-
-<script lang="ts">
-type Page = {
-  name: string
-  enable?: boolean
-  url?: string
-}
-type ListItem = {
-  id: string
-  name: string
-  open: boolean
-  pages: Page[]
-  url?: string
-  enable?: boolean
-}
-export default {
-  data() {
-    return {
-      list: [
-        {
-          id: 'background',
-          name: 'background',
-          open: false,
-          pages: [
-            {
-              name: 'background-color',
-              url: '/pages/CSS/background/background-color',
-            },
-            {
-              name: 'background-image',
-              url: '/pages/CSS/background/background-image',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'border',
-          name: 'border',
-          open: false,
-          pages: [
-            {
-              name: 'border',
-              url: '/pages/CSS/border/border',
-            },
-            {
-              name: 'border-width',
-              url: '/pages/CSS/border/border-width',
-            },
-            {
-              name: 'border-style',
-              url: '/pages/CSS/border/border-style',
-            },
-            {
-              name: 'border-color',
-              url: '/pages/CSS/border/border-color',
-            },
-            {
-              name: 'border-radius',
-              url: '/pages/CSS/border/border-radius',
-            },
-            {
-              name: 'border属性复合示例',
-              url: '/pages/CSS/border/complex-border/complex-border',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'box-shadow',
-          name: 'box-shadow',
-          open: false,
-          pages: [
-            {
-              name: 'box-shadow',
-              url: '/pages/CSS/box-shadow/box-shadow',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'flex',
-          name: 'flex',
-          open: false,
-          pages: [
-            {
-              name: 'align-content',
-              url: '/pages/CSS/flex/align-content',
-            },
-            {
-              name: 'align-items',
-              url: '/pages/CSS/flex/align-items',
-            },
-            {
-              name: 'flex-basis',
-              url: '/pages/CSS/flex/flex-basis',
-            },
-            {
-              name: 'flex-direction',
-              url: '/pages/CSS/flex/flex-direction',
-            },
-            {
-              name: 'flex-flow',
-              url: '/pages/CSS/flex/flex-flow',
-            },
-            {
-              name: 'flex-grow',
-              url: '/pages/CSS/flex/flex-grow',
-            },
-            {
-              name: 'flex-shrink',
-              url: '/pages/CSS/flex/flex-shrink',
-            },
-            {
-              name: 'flex',
-              url: '/pages/CSS/flex/flex',
-            },
-            {
-              name: 'justify-content',
-              url: '/pages/CSS/flex/justify-content',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'layout',
-          name: 'layout',
-          open: false,
-          pages: [
-            {
-              name: 'height',
-              url: '/pages/CSS/layout/height',
-            },
-            {
-              name: 'max-height',
-              url: '/pages/CSS/layout/max-height',
-            },
-            {
-              name: 'max-width',
-              url: '/pages/CSS/layout/max-width',
-            },
-            {
-              name: 'min-height',
-              url: '/pages/CSS/layout/min-height',
-            },
-            {
-              name: 'min-width',
-              url: '/pages/CSS/layout/min-width',
-            },
-            {
-              name: 'position',
-              url: '/pages/CSS/layout/position',
-            },
-            {
-              name: 'width',
-              url: '/pages/CSS/layout/width',
-            },
-            {
-              name: 'visibility',
-              url: '/pages/CSS/layout/visibility',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'margin',
-          name: 'margin',
-          open: false,
-          pages: [
-            {
-              name: 'margin-bottom',
-              url: '/pages/CSS/margin/margin-bottom',
-            },
-            {
-              name: 'margin-left',
-              url: '/pages/CSS/margin/margin-left',
-            },
-            {
-              name: 'margin-right',
-              url: '/pages/CSS/margin/margin-right',
-            },
-            {
-              name: 'margin-top',
-              url: '/pages/CSS/margin/margin-top',
-            },
-            {
-              name: 'margin',
-              url: '/pages/CSS/margin/margin',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'padding',
-          name: 'padding',
-          open: false,
-          pages: [
-            {
-              name: 'padding-bottom',
-              url: '/pages/CSS/padding/padding-bottom',
-            },
-            {
-              name: 'padding-left',
-              url: '/pages/CSS/padding/padding-left',
-            },
-            {
-              name: 'padding-right',
-              url: '/pages/CSS/padding/padding-right',
-            },
-            {
-              name: 'padding-top',
-              url: '/pages/CSS/padding/padding-top',
-            },
-            {
-              name: 'padding',
-              url: '/pages/CSS/padding/padding',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'text',
-          name: 'text',
-          open: false,
-          pages: [
-            {
-              name: 'color',
-              url: '/pages/CSS/text/color',
-            },
-            {
-              name: 'font-family',
-              url: '/pages/CSS/text/font-family',
-            },
-            {
-              name: 'font-size',
-              url: '/pages/CSS/text/font-size',
-            },
-            {
-              name: 'font-style',
-              url: '/pages/CSS/text/font-style',
-            },
-            {
-              name: 'font-weight',
-              url: '/pages/CSS/text/font-weight',
-            },
-            {
-              name: 'line-height',
-              url: '/pages/CSS/text/line-height',
-            },
-            {
-              name: 'text-align',
-              url: '/pages/CSS/text/text-align',
-            },
-            {
-              name: 'text-overflow',
-              url: '/pages/CSS/text/text-overflow',
-            },
-            {
-              name: 'text-decoration-line',
-              url: '/pages/CSS/text/text-decoration-line',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'animate',
-          name: '动画',
-          open: false,
-          pages: [
-            {
-              name: 'transition',
-              url: '/pages/CSS/transition/transition',
-            },
-            {
-              name: 'transform',
-              url: '/pages/CSS/transform/transform',
-            },
-          ] as Page[],
-        },
-      ] as ListItem[],
-      arrowUpIcon: '/static/icons/arrow-up.png',
-      arrowDownIcon: '/static/icons/arrow-down.png',
-      arrowRightIcon: '/static/icons/arrow-right.png',
-    }
-  },
-  methods: {
-    triggerCollapse(index?: number, item: ListItem) {
-      if (item.pages.length == 0) {
-        const page: Page = {
-          name: item.name,
-          enable: item.enable,
-          url: item.url,
-        }
-        this.goDetailPage(page)
-        return
-      }
-      for (var i = 0; i < this.list.length; ++i) {
-        if (index == i) {
-          this.list[i].open = !this.list[i].open
-        } else {
-          this.list[i].open = false
-        }
-      }
-    },
-    goDetailPage(e: Page) {
-      if (e.enable == false) {
-        uni.showToast({
-          icon: 'none',
-          title: '暂不支持',
-        })
-        return
-      }
-      const url = e.url != null ? e.url! : `/pages/CSS/${e.name}/${e.name}`
-      uni.navigateTo({
-        url,
-      })
-    },
-  },
-}
-</script>
-
-<style>
-@import '../../common/uni-uvue.css';
-</style>
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view class="uni-container">
+      <view class="uni-header-logo">
+        <image class="uni-header-image" src="/static/cssIndex.png"></image>
+      </view>
+      <view class="uni-hello-text">
+        <text class="hello-text"
+          >uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text
+        >
+        <u-link
+          :href="'https://uniapp.dcloud.io/component/'"
+          :text="'https://uniapp.dcloud.io/component/'"
+          :inWhiteList="true"
+        ></u-link>
+      </view>
+      <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
+        <view
+          class="uni-panel-h"
+          :class="item.open ? 'uni-panel-h-on' : ''"
+          @click="triggerCollapse(index, item)"
+        >
+          <text
+            class="uni-panel-text"
+            :class="item.enable == false ? 'text-disabled' : ''"
+            >{{ item.name }}</text
+          >
+          <image
+            :src="
+              item.pages.length > 0
+                ? item.open
+                  ? arrowUpIcon
+                  : arrowDownIcon
+                : arrowRightIcon
+            "
+            class="uni-icon"
+          ></image>
+        </view>
+        <view class="uni-panel-c" v-if="item.open">
+          <view
+            class="uni-navigate-item"
+            v-for="(page, key) in item.pages"
+            :key="key"
+            @click="goDetailPage(page)"
+          >
+            <text
+              class="uni-navigate-text"
+              :class="page.enable == false ? 'text-disabled' : ''"
+              >{{ page.name }}</text
+            >
+            <image :src="arrowRightIcon" class="uni-icon"></image>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script lang="ts">
+type Page = {
+  name: string
+  enable?: boolean
+  url?: string
+}
+type ListItem = {
+  id: string
+  name: string
+  open: boolean
+  pages: Page[]
+  url?: string
+  enable?: boolean
+}
+export default {
+  data() {
+    return {
+      list: [
+        {
+          id: 'background',
+          name: 'background',
+          open: false,
+          pages: [
+            {
+              name: 'background-color',
+              url: '/pages/CSS/background/background-color',
+            },
+            {
+              name: 'background-image',
+              url: '/pages/CSS/background/background-image',
+            },
+          ] as Page[],
+        },
+        {
+          id: 'border',
+          name: 'border',
+          open: false,
+          pages: [
+            {
+              name: 'border',
+              url: '/pages/CSS/border/border',
+            },
+            {
+              name: 'border-width',
+              url: '/pages/CSS/border/border-width',
+            },
+            {
+              name: 'border-style',
+              url: '/pages/CSS/border/border-style',
+            },
+            {
+              name: 'border-color',
+              url: '/pages/CSS/border/border-color',
+            },
+            {
+              name: 'border-radius',
+              url: '/pages/CSS/border/border-radius',
+            },
+            {
+              name: 'border属性复合示例',
+              url: '/pages/CSS/border/complex-border/complex-border',
+            },
+          ] as Page[],
+        },
+        {
+          id: 'box-shadow',
+          name: 'box-shadow',
+          open: false,
+          pages: [
+            {
+              name: 'box-shadow',
+              url: '/pages/CSS/box-shadow/box-shadow',
+            },
+          ] as Page[],
+        },
+        {
+          id: 'flex',
+          name: 'flex',
+          open: false,
+          pages: [
+            {
+              name: 'align-content',
+              url: '/pages/CSS/flex/align-content',
+            },
+            {
+              name: 'align-items',
+              url: '/pages/CSS/flex/align-items',
+            },
+            {
+              name: 'flex-basis',
+              url: '/pages/CSS/flex/flex-basis',
+            },
+            {
+              name: 'flex-direction',
+              url: '/pages/CSS/flex/flex-direction',
+            },
+            {
+              name: 'flex-flow',
+              url: '/pages/CSS/flex/flex-flow',
+            },
+            {
+              name: 'flex-grow',
+              url: '/pages/CSS/flex/flex-grow',
+            },
+            {
+              name: 'flex-shrink',
+              url: '/pages/CSS/flex/flex-shrink',
+            },
+            {
+              name: 'flex',
+              url: '/pages/CSS/flex/flex',
+            },
+            {
+              name: 'justify-content',
+              url: '/pages/CSS/flex/justify-content',
+            },
+          ] as Page[],
+        },
+        {
+          id: 'layout',
+          name: 'layout',
+          open: false,
+          pages: [
+            {
+              name: 'height',
+              url: '/pages/CSS/layout/height',
+            },
+            {
+              name: 'max-height',
+              url: '/pages/CSS/layout/max-height',
+            },
+            {
+              name: 'max-width',
+              url: '/pages/CSS/layout/max-width',
+            },
+            {
+              name: 'min-height',
+              url: '/pages/CSS/layout/min-height',
+            },
+            {
+              name: 'min-width',
+              url: '/pages/CSS/layout/min-width',
+            },
+            {
+              name: 'position',
+              url: '/pages/CSS/layout/position',
+            },
+            {
+              name: 'width',
+              url: '/pages/CSS/layout/width',
+            },
+            {
+              name: 'visibility',
+              url: '/pages/CSS/layout/visibility',
+            },
+          ] as Page[],
+        },
+        {
+          id: 'margin',
+          name: 'margin',
+          open: false,
+          pages: [
+            {
+              name: 'margin-bottom',
+              url: '/pages/CSS/margin/margin-bottom',
+            },
+            {
+              name: 'margin-left',
+              url: '/pages/CSS/margin/margin-left',
+            },
+            {
+              name: 'margin-right',
+              url: '/pages/CSS/margin/margin-right',
+            },
+            {
+              name: 'margin-top',
+              url: '/pages/CSS/margin/margin-top',
+            },
+            {
+              name: 'margin',
+              url: '/pages/CSS/margin/margin',
+            },
+          ] as Page[],
+        },
+        {
+          id: 'padding',
+          name: 'padding',
+          open: false,
+          pages: [
+            {
+              name: 'padding-bottom',
+              url: '/pages/CSS/padding/padding-bottom',
+            },
+            {
+              name: 'padding-left',
+              url: '/pages/CSS/padding/padding-left',
+            },
+            {
+              name: 'padding-right',
+              url: '/pages/CSS/padding/padding-right',
+            },
+            {
+              name: 'padding-top',
+              url: '/pages/CSS/padding/padding-top',
+            },
+            {
+              name: 'padding',
+              url: '/pages/CSS/padding/padding',
+            },
+          ] as Page[],
+        },
+        {
+          id: 'text',
+          name: 'text',
+          open: false,
+          pages: [
+            {
+              name: 'color',
+              url: '/pages/CSS/text/color',
+            },
+            {
+              name: 'font-family',
+              url: '/pages/CSS/text/font-family',
+            },
+            {
+              name: 'font-size',
+              url: '/pages/CSS/text/font-size',
+            },
+            {
+              name: 'font-style',
+              url: '/pages/CSS/text/font-style',
+            },
+            {
+              name: 'font-weight',
+              url: '/pages/CSS/text/font-weight',
+            },
+            {
+              name: 'line-height',
+              url: '/pages/CSS/text/line-height',
+            },
+            {
+              name: 'text-align',
+              url: '/pages/CSS/text/text-align',
+            },
+            {
+              name: 'text-overflow',
+              url: '/pages/CSS/text/text-overflow',
+            },
+            {
+              name: 'text-decoration-line',
+              url: '/pages/CSS/text/text-decoration-line',
+            },
+          ] as Page[],
+        },
+        {
+          id: 'animate',
+          name: '动画',
+          open: false,
+          pages: [
+            {
+              name: 'transition',
+              url: '/pages/CSS/transition/transition',
+            },
+            {
+              name: 'transform',
+              url: '/pages/CSS/transform/transform',
+            },
+          ] as Page[],
+        },
+      ] as ListItem[],
+      arrowUpIcon: '/static/icons/arrow-up.png',
+      arrowDownIcon: '/static/icons/arrow-down.png',
+      arrowRightIcon: '/static/icons/arrow-right.png',
+    }
+  },
+  methods: {
+    triggerCollapse(index?: number, item: ListItem) {
+      if (item.pages.length == 0) {
+        const page: Page = {
+          name: item.name,
+          enable: item.enable,
+          url: item.url,
+        }
+        this.goDetailPage(page)
+        return
+      }
+      for (var i = 0; i < this.list.length; ++i) {
+        if (index == i) {
+          this.list[i].open = !this.list[i].open
+        } else {
+          this.list[i].open = false
+        }
+      }
+    },
+    goDetailPage(e: Page) {
+      if (e.enable == false) {
+        uni.showToast({
+          icon: 'none',
+          title: '暂不支持',
+        })
+        return
+      }
+      const url = e.url != null ? e.url! : `/pages/CSS/${e.name}/${e.name}`
+      uni.navigateTo({
+        url,
+      })
+    },
+  },
+}
+</script>
+
+<style>
+@import '../../common/uni-uvue.css';
+</style>
diff --git a/pages/tabBar/component.uvue b/pages/tabBar/component.uvue
index c00a2021f6161048a33844c0a9bf0a44714de592..ceb71e3803cdb456d60a209f69304eb94860cb50 100644
--- a/pages/tabBar/component.uvue
+++ b/pages/tabBar/component.uvue
@@ -1,315 +1,324 @@
-<template>
-  <scroll-view class="uni-container">
-    <view class="uni-header-logo">
-      <image class="uni-header-image" src="/static/componentIndex.png"></image>
-    </view>
-    <view class="uni-hello-text">
-      <text class="hello-text"
-        >uni-app内置组件，展示样式仅供参考，文档详见：</text
-      >
-      <u-link
-        :href="'https://uniapp.dcloud.io/component/'"
-        :text="'https://uniapp.dcloud.io/component/'"
-        :inWhiteList="true"
-      ></u-link>
-    </view>
-    <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
-      <view
-        class="uni-panel-h"
-        :class="item.open ? 'uni-panel-h-on' : ''"
-        @click="triggerCollapse(index, item)"
-      >
-        <text
-          class="uni-panel-text"
-          :class="item.enable == false ? 'text-disabled' : ''"
-          >{{ item.name }}</text
-        >
-        <image
-          :src="
-            item.pages.length > 0
-              ? item.open
-                ? arrowUpIcon
-                : arrowDownIcon
-              : arrowRightIcon
-          "
-          class="uni-icon"
-        ></image>
-      </view>
-      <view class="uni-panel-c" v-if="item.open">
-        <view
-          class="uni-navigate-item"
-          v-for="(page, key) in item.pages"
-          :key="key"
-          @click="goDetailPage(page)"
-        >
-          <text
-            class="uni-navigate-text"
-            :class="page.enable == false ? 'text-disabled' : ''"
-            >{{ page.name }}</text
-          >
-          <image :src="arrowRightIcon" class="uni-icon"></image>
-        </view>
-      </view>
-    </view>
-  </scroll-view>
-</template>
-
-<script lang="ts">
-type Page = {
-  name: string
-  enable?: boolean
-  url?: string
-}
-type ListItem = {
-  id: string
-  name: string
-  open: boolean
-  pages: Page[]
-  url?: string
-  enable?: boolean
-}
-export default {
-  data() {
-    return {
-      list: [
-        {
-          id: 'view',
-          name: '视图容器',
-          open: false,
-          pages: [
-            {
-              name: 'view',
-            },
-            {
-              name: 'scroll-view',
-            },
-            {
-              name: 'swiper',
-            },
-            /*
-						{
-							name: 'movable-view',
-							enable: false
-						},
-						{
-							name: 'cover-view',
-							enable: false
-						},
-						*/
-            {
-              name: 'list（新闻）',
-              url: '/pages/component/list/list',
-            },
-            {
-              name: 'list',
-              url: '/pages/component/long-list/long-list',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'content',
-          name: '基础内容',
-          open: false,
-          pages: [
-            {
-              name: 'text',
-            },
-            {
-              name: 'rich-text',
-              enable: false,
-            },
-            {
-              name: 'progress',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'form',
-          name: '表单组件',
-          open: false,
-          pages: [
-            {
-              name: 'button',
-            },
-            {
-              name: 'checkbox',
-            },
-            /* {
-							name: 'form',
-							enable: false
-						}, */
-            {
-              name: 'input',
-              /* }, {
-								name: 'label',
-								enable: false
-							}, {
-								name: 'picker',
-								enable: false */
-            },
-            {
-              name: 'picker-view',
-            },
-            {
-              name: 'radio',
-            },
-            {
-              name: 'slider',
-            },
-            {
-              name: 'slider-100',
-            },
-            {
-              name: 'switch',
-            },
-            {
-              name: 'textarea',
-            },
-            /*
-						{
-							name: 'editor',
-							enable: false
-						},
-						*/
-          ] as Page[],
-          /* }, {
-						id: 'nav',
-						name: '导航',
-						open: false,
-						pages: [{
-							name: 'navigator',
-							enable: false
-						}] as Page[] */
-        },
-        {
-          id: 'media',
-          name: '媒体组件',
-          open: false,
-          pages: [
-            {
-              name: 'image',
-              enable: true,
-            },
-            {
-              name: 'video',
-              enable: true,
-            },
-            {
-              name: 'animation-view',
-              enable: false,
-            },
-          ] as Page[],
-        },
-        /*
-				{
-					id: 'map',
-					name: '地图',
-					open: false,
-					pages: [
-						{
-							name: 'map',
-							enable: false
-						}
-					] as Page[]
-				},
-				{
-					id: 'canvas',
-					name: '画布',
-					open: false,
-					pages: [
-						{
-							name: 'canvas'
-						}
-					] as Page[]
-				},
-				*/
-        {
-          id: 'web-view',
-          name: '网页',
-          open: false,
-          pages: [
-            {
-              name: '网络网页',
-              enable: true,
-              url: '/pages/component/web-view/web-view',
-            },
-            {
-              name: '本地网页',
-              enable: true,
-              url: '/pages/component/web-view-local/web-view-local',
-            },
-          ] as Page[],
-        },
-        /*
-				{
-					id: 'ad',
-					url: 'ad',
-					name: 'AD组件',
-					enable: false,
-					open: false,
-					pages: [] as Page[]
-				}
-				*/
-        {
-          id: 'general-attr-event',
-          name: '通用属性和事件',
-          open: false,
-          pages: [
-            {
-              name: '通用属性',
-              url: 'general-attr',
-              enable: false,
-            },
-            {
-              name: '通用事件',
-              url: 'general-event',
-              enable: false,
-            },
-          ] as Page[],
-        },
-      ] as ListItem[],
-      arrowUpIcon: '/static/icons/arrow-up.png',
-      arrowDownIcon: '/static/icons/arrow-down.png',
-      arrowRightIcon: '/static/icons/arrow-right.png',
-    }
-  },
-  methods: {
-    triggerCollapse(index?: number, item: ListItem) {
-      if (item.pages.length == 0) {
-        const page: Page = {
-          name: item.name,
-          enable: item.enable,
-          url: item.url,
-        }
-        this.goDetailPage(page)
-        return
-      }
-      for (var i = 0; i < this.list.length; ++i) {
-        if (index == i) {
-          this.list[i].open = !this.list[i].open
-        } else {
-          this.list[i].open = false
-        }
-      }
-    },
-    goDetailPage(e: Page) {
-      if (e.enable == false) {
-        uni.showToast({
-          title: '暂不支持',
-          icon: 'none',
-        })
-        return
-      }
-      const url =
-        e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}`
-      uni.navigateTo({
-        url,
-      })
-    },
-  },
-}
-</script>
-
-<style>
-@import '../../common/uni-uvue.css';
-</style>
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view class="uni-container">
+      <view class="uni-header-logo">
+        <image
+          class="uni-header-image"
+          src="/static/componentIndex.png"
+        ></image>
+      </view>
+      <view class="uni-hello-text">
+        <text class="hello-text"
+          >uni-app内置组件，展示样式仅供参考，文档详见：</text
+        >
+        <u-link
+          :href="'https://uniapp.dcloud.io/component/'"
+          :text="'https://uniapp.dcloud.io/component/'"
+          :inWhiteList="true"
+        ></u-link>
+      </view>
+      <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
+        <view
+          class="uni-panel-h"
+          :class="item.open ? 'uni-panel-h-on' : ''"
+          @click="triggerCollapse(index, item)"
+        >
+          <text
+            class="uni-panel-text"
+            :class="item.enable == false ? 'text-disabled' : ''"
+            >{{ item.name }}</text
+          >
+          <image
+            :src="
+              item.pages.length > 0
+                ? item.open
+                  ? arrowUpIcon
+                  : arrowDownIcon
+                : arrowRightIcon
+            "
+            class="uni-icon"
+          ></image>
+        </view>
+        <view class="uni-panel-c" v-if="item.open">
+          <view
+            class="uni-navigate-item"
+            v-for="(page, key) in item.pages"
+            :key="key"
+            @click="goDetailPage(page)"
+          >
+            <text
+              class="uni-navigate-text"
+              :class="page.enable == false ? 'text-disabled' : ''"
+              >{{ page.name }}</text
+            >
+            <image :src="arrowRightIcon" class="uni-icon"></image>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script lang="ts">
+type Page = {
+  name: string
+  enable?: boolean
+  url?: string
+}
+type ListItem = {
+  id: string
+  name: string
+  open: boolean
+  pages: Page[]
+  url?: string
+  enable?: boolean
+}
+export default {
+  data() {
+    return {
+      list: [
+        {
+          id: 'view',
+          name: '视图容器',
+          open: false,
+          pages: [
+            {
+              name: 'view',
+            },
+            {
+              name: 'scroll-view',
+            },
+            {
+              name: 'swiper',
+            },
+            /*
+							{
+								name: 'movable-view',
+								enable: false
+							},
+							{
+								name: 'cover-view',
+								enable: false
+							},
+							*/
+            {
+              name: 'list（新闻）',
+              url: '/pages/component/list/list',
+            },
+            {
+              name: 'list',
+              url: '/pages/component/long-list/long-list',
+            },
+          ] as Page[],
+        },
+        {
+          id: 'content',
+          name: '基础内容',
+          open: false,
+          pages: [
+            {
+              name: 'text',
+            },
+            {
+              name: 'rich-text',
+              enable: false,
+            },
+            {
+              name: 'progress',
+            },
+          ] as Page[],
+        },
+        {
+          id: 'form',
+          name: '表单组件',
+          open: false,
+          pages: [
+            {
+              name: 'button',
+            },
+            {
+              name: 'checkbox',
+            },
+            /* {
+								name: 'form',
+								enable: false
+							}, */
+            {
+              name: 'input',
+              /* }, {
+									name: 'label',
+									enable: false
+								}, {
+									name: 'picker',
+									enable: false */
+            },
+            {
+              name: 'picker-view',
+            },
+            {
+              name: 'radio',
+            },
+            {
+              name: 'slider',
+            },
+            {
+              name: 'slider-100',
+            },
+            {
+              name: 'switch',
+            },
+            {
+              name: 'textarea',
+            },
+            /*
+							{
+								name: 'editor',
+								enable: false
+							},
+							*/
+          ] as Page[],
+          /* }, {
+							id: 'nav',
+							name: '导航',
+							open: false,
+							pages: [{
+								name: 'navigator',
+								enable: false
+							}] as Page[] */
+        },
+        {
+          id: 'media',
+          name: '媒体组件',
+          open: false,
+          pages: [
+            {
+              name: 'image',
+              enable: true,
+            },
+            {
+              name: 'video',
+              enable: true,
+            },
+            {
+              name: 'animation-view',
+              enable: false,
+            },
+          ] as Page[],
+        },
+        /*
+					{
+						id: 'map',
+						name: '地图',
+						open: false,
+						pages: [
+							{
+								name: 'map',
+								enable: false
+							}
+						] as Page[]
+					},
+					{
+						id: 'canvas',
+						name: '画布',
+						open: false,
+						pages: [
+							{
+								name: 'canvas'
+							}
+						] as Page[]
+					},
+					*/
+        {
+          id: 'web-view',
+          name: '网页',
+          open: false,
+          pages: [
+            {
+              name: '网络网页',
+              enable: true,
+              url: '/pages/component/web-view/web-view',
+            },
+            {
+              name: '本地网页',
+              enable: true,
+              url: '/pages/component/web-view-local/web-view-local',
+            },
+          ] as Page[],
+        },
+        /*
+					{
+						id: 'ad',
+						url: 'ad',
+						name: 'AD组件',
+						enable: false,
+						open: false,
+						pages: [] as Page[]
+					}
+					*/
+        {
+          id: 'general-attr-event',
+          name: '通用属性和事件',
+          open: false,
+          pages: [
+            {
+              name: '通用属性',
+              url: 'general-attr',
+              enable: false,
+            },
+            {
+              name: '通用事件',
+              url: 'general-event',
+              enable: false,
+            },
+          ] as Page[],
+        },
+      ] as ListItem[],
+      arrowUpIcon: '/static/icons/arrow-up.png',
+      arrowDownIcon: '/static/icons/arrow-down.png',
+      arrowRightIcon: '/static/icons/arrow-right.png',
+    }
+  },
+  methods: {
+    triggerCollapse(index?: number, item: ListItem) {
+      if (item.pages.length == 0) {
+        const page: Page = {
+          name: item.name,
+          enable: item.enable,
+          url: item.url,
+        }
+        this.goDetailPage(page)
+        return
+      }
+      for (var i = 0; i < this.list.length; ++i) {
+        if (index == i) {
+          this.list[i].open = !this.list[i].open
+        } else {
+          this.list[i].open = false
+        }
+      }
+    },
+    goDetailPage(e: Page) {
+      if (e.enable == false) {
+        uni.showToast({
+          title: '暂不支持',
+          icon: 'none',
+        })
+        return
+      }
+      const url =
+        e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}`
+      uni.navigateTo({
+        url,
+      })
+    },
+  },
+}
+</script>
+
+<style>
+@import '../../common/uni-uvue.css';
+</style>
diff --git a/pages/tabBar/template.uvue b/pages/tabBar/template.uvue
index 6e87be7f6984c7354b73d0dc0951b389cd5c6081..2cc87344d9c2219336ec89829150382dd78f81a9 100644
--- a/pages/tabBar/template.uvue
+++ b/pages/tabBar/template.uvue
@@ -1,57 +1,63 @@
 <template>
-  <scroll-view class="uni-container">
-    <view class="uni-header-logo">
-      <image class="uni-header-image" src="/static/templateIndex.png"></image>
-    </view>
-    <view class="uni-hello-text">
-      <text class="hello-text">以下是部分模板示例，更多模板见插件市场：</text>
-      <u-link
-        class="hello-link"
-        href="https://ext.dcloud.net.cn"
-        :text="'https://ext.dcloud.net.cn'"
-        :inWhiteList="true"
-      ></u-link>
-    </view>
-    <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
-      <view
-        class="uni-panel-h"
-        :class="item.open ? 'uni-panel-h-on' : ''"
-        @click="triggerCollapse(index, item)"
-      >
-        <text
-          class="uni-panel-text"
-          :class="item.enable == false ? 'text-disabled' : ''"
-          >{{ item.name }}</text
-        >
-        <image
-          :src="
-            item.pages.length > 0
-              ? item.open
-                ? arrowUpIcon
-                : arrowDownIcon
-              : arrowRightIcon
-          "
-          class="uni-icon"
-        >
-        </image>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view class="uni-container">
+      <view class="uni-header-logo">
+        <image class="uni-header-image" src="/static/templateIndex.png"></image>
       </view>
-      <view class="uni-panel-c" v-if="item.open">
+      <view class="uni-hello-text">
+        <text class="hello-text">以下是部分模板示例，更多模板见插件市场：</text>
+        <u-link
+          class="hello-link"
+          href="https://ext.dcloud.net.cn"
+          :text="'https://ext.dcloud.net.cn'"
+          :inWhiteList="true"
+        ></u-link>
+      </view>
+      <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
         <view
-          class="uni-navigate-item"
-          v-for="(page, key) in item.pages"
-          :key="key"
-          @click="goDetailPage(page)"
+          class="uni-panel-h"
+          :class="item.open ? 'uni-panel-h-on' : ''"
+          @click="triggerCollapse(index, item)"
         >
           <text
-            class="uni-navigate-text"
-            :class="page.enable == false ? 'text-disabled' : ''"
-            >{{ page.name }}</text
+            class="uni-panel-text"
+            :class="item.enable == false ? 'text-disabled' : ''"
+            >{{ item.name }}</text
+          >
+          <image
+            :src="
+              item.pages.length > 0
+                ? item.open
+                  ? arrowUpIcon
+                  : arrowDownIcon
+                : arrowRightIcon
+            "
+            class="uni-icon"
+          >
+          </image>
+        </view>
+        <view class="uni-panel-c" v-if="item.open">
+          <view
+            class="uni-navigate-item"
+            v-for="(page, key) in item.pages"
+            :key="key"
+            @click="goDetailPage(page)"
           >
-          <image :src="arrowRightIcon" class="uni-icon"></image>
+            <text
+              class="uni-navigate-text"
+              :class="page.enable == false ? 'text-disabled' : ''"
+              >{{ page.name }}</text
+            >
+            <image :src="arrowRightIcon" class="uni-icon"></image>
+          </view>
         </view>
       </view>
     </view>
+    <!-- #ifdef APP -->
   </scroll-view>
+  <!-- #endif -->
 </template>
 
 <script lang="ts">