diff --git a/docs/component/canvas.md b/docs/component/canvas.md
index 1d1c270ada29790ace912021f57c710d8c7073c1..39d9b9d1749537ae4319d4a57e4ad65b1738eccc 100644
--- a/docs/component/canvas.md
+++ b/docs/component/canvas.md
@@ -42,6 +42,7 @@
 ```
 > Script
 ```vue
+<script>
 export default {
 	onReady: function (e) {
 		var context = uni.createCanvasContext('firstCanvas')
@@ -68,6 +69,7 @@ export default {
 		}
 	}
 }
+</script>
 ```
 :::
  
diff --git a/docs/component/map.md b/docs/component/map.md
index 8bbfd267adb77e7056eca61938be9b8deaa285cc..a514a772674ab30a1eecc14c44bf5d7584bcab85 100644
--- a/docs/component/map.md
+++ b/docs/component/map.md
@@ -231,7 +231,7 @@ MapContext.on('markerClusterCreate', callback) 触发时，通过 [MapContext.ad
 export default {
 	data() {
 		return {
-      id:0, // 使用 marker点击事件 需要填写id
+			id:0, // 使用 marker点击事件 需要填写id
 			title: 'map',
 			latitude: 39.909,
 			longitude: 116.39742,
diff --git a/docs/component/rich-text.md b/docs/component/rich-text.md
index a86829ce0e17a2187b5de6e32790267a6a19c7a0..2858721a3688c7698246c39a4743d25b00eff3c4 100644
--- a/docs/component/rich-text.md
+++ b/docs/component/rich-text.md
@@ -136,6 +136,7 @@ export default {
         }
     }
 }
+</script>
 ```
 :::
 
diff --git a/docs/component/swiper.md b/docs/component/swiper.md
index c37ed93dc39d54a75ab866ef23a34e84c409f9f1..8a2cdd7f95ef6810210fb1ef661a754acfb32afd 100644
--- a/docs/component/swiper.md
+++ b/docs/component/swiper.md
@@ -88,23 +88,21 @@ change 事件返回 detail 中包含一个 source 字段，表示导致变更的
 <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
 <template>
 	<view>
-		<view class="uni-padding-wrap">
-			<view class="page-section swiper">
-				<view class="page-section-spacing">
-					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
-						<swiper-item>
-							<view class="swiper-item uni-bg-red">A</view>
-						</swiper-item>
-						<swiper-item>
-							<view class="swiper-item uni-bg-green">B</view>
-						</swiper-item>
-						<swiper-item>
-							<view class="swiper-item uni-bg-blue">C</view>
-						</swiper-item>
-					</swiper>
-				</view>
-			</view>
+		<view class="uni-margin-wrap">
+			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
+				:duration="duration">
+				<swiper-item>
+					<view class="swiper-item uni-bg-red">A</view>
+				</swiper-item>
+				<swiper-item>
+					<view class="swiper-item uni-bg-green">B</view>
+				</swiper-item>
+				<swiper-item>
+					<view class="swiper-item uni-bg-blue">C</view>
+				</swiper-item>
+			</swiper>
 		</view>
+		
 		<view class="swiper-list">
 			<view class="uni-list-cell uni-list-cell-pd">
 				<view class="uni-list-cell-db">指示点</view>
@@ -115,6 +113,7 @@ change 事件返回 detail 中包含一个 source 字段，表示导致变更的
 				<switch :checked="autoplay" @change="changeAutoplay" />
 			</view>
 		</view>
+		
 		<view class="uni-padding-wrap">
 			<view class="uni-common-mt">
 				<text>幻灯片切换时长(ms)</text>
@@ -160,5 +159,39 @@ export default {
 }
 </script>
 ```
+> Style
+```vue
+<style>
+	.uni-margin-wrap {
+		width: 690rpx;
+		width: 100%;
+	}
+	.swiper {
+		height: 300rpx;
+	}
+	.swiper-item {
+		display: block;
+		height: 300rpx;
+		line-height: 300rpx;
+		text-align: center;
+	}
+	.swiper-list {
+		margin-top: 40rpx;
+		margin-bottom: 0;
+	}
+	.uni-common-mt {
+		margin-top: 60rpx;
+		position: relative;
+	}
+	.info {
+		position: absolute;
+		right: 20rpx;
+	}
+	.uni-padding-wrap {
+		width: 550rpx;
+		padding: 0 100rpx;
+	}
+</style>
+```
 :::
 
diff --git a/docs/component/web-view.md b/docs/component/web-view.md
index b8643e26d92e0e4e598c73e959c97b50dcd2fd96..e58b9369386dc151fb1925d433e612dc6a83d047 100644
--- a/docs/component/web-view.md
+++ b/docs/component/web-view.md
@@ -38,6 +38,9 @@
 |:-|:-|:-|:-|
 |color|String|#00FF00|进度条颜色|
 
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/component/web-view/web-view
+
 ```html
 <template>
 	<view>
@@ -63,6 +66,7 @@
 
 </style>
 ```
+:::
 
 注意：
 - 小程序仅支持加载网络网页，不支持本地html