add preview

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>
 ```
 :::
  

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,

docs/component/rich-text.md

@@ -136,6 +136,7 @@ export default {
         }
     }
 }
+</script>
 ```
 :::
 

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>
+```
 :::
 

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