docs(Swipe): add tips of custom size in loop mode (#5057)

src/swipe/README.md

@@ -49,7 +49,7 @@ export default {
 }
 ```
 
-### change event
+### Change Event
 
 ```html
 <van-swipe @change="onChange">
@@ -81,7 +81,7 @@ export default {
 </van-swipe>
 ```
 
-### Set Swiper Item Size
+### Set SwipeItem Size
 
 ```html
 <van-swipe :loop="false" :width="300">
@@ -92,6 +92,8 @@ export default {
 </van-swipe>
 ```
 
+> It's not supported to set SwipeItem size in the loop mode
+
 ### Custom Indicator
 
 ```html

src/swipe/README.zh-CN.md

@@ -83,9 +83,9 @@ export default {
 </van-swipe>
 ```
 
-### 控制滑块大小
+### 自定义滑块大小
 
-滑块默认宽度为`100%`，可以通过`width`属性设置滑块的宽度，此属性不能与循环播放同时使用
+滑块默认宽度为`100%`，可以通过`width`属性设置单个滑块的宽度。纵向滚动模式下，可以通过`height`属性设置单个滑块的高度。
 
 ```html
 <van-swipe :loop="false" :width="300">
@@ -96,6 +96,8 @@ export default {
 </van-swipe>
 ```
 
+> 目前不支持在循环滚动模式下自定义滑块大小，因此需要将 loop 设置为 false
+
 ### 自定义指示器
 
 通过`indicator`插槽可以自定义指示器的样式

src/swipe/demo/index.vue

@@ -1,10 +1,7 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-swipe
+      <van-swipe :autoplay="3000" indicator-color="white">
-        :autoplay="3000"
-        indicator-color="white"
-      >
         <van-swipe-item>1</van-swipe-item>
         <van-swipe-item>2</van-swipe-item>
         <van-swipe-item>3</van-swipe-item>
@@ -14,20 +11,14 @@
 
     <demo-block :title="$t('title2')">
       <van-swipe :autoplay="3000">
-        <van-swipe-item
+        <van-swipe-item v-for="(image, index) in images" :key="index">
-          v-for="(image, index) in images"
-          :key="index"
-        >
           <img v-lazy="image">
         </van-swipe-item>
       </van-swipe>
     </demo-block>
 
     <demo-block :title="$t('title3')">
-      <van-swipe
+      <van-swipe indicator-color="white" @change="onChange1">
-        indicator-color="white"
-        @change="onChange1"
-      >
         <van-swipe-item>1</van-swipe-item>
         <van-swipe-item>2</van-swipe-item>
         <van-swipe-item>3</van-swipe-item>
@@ -51,11 +42,7 @@
     </demo-block>
 
     <demo-block :title="$t('title5')">
-      <van-swipe
+      <van-swipe :width="300" :loop="false" indicator-color="white">
-        :width="300"
-        :loop="false"
-        indicator-color="white"
-      >
         <van-swipe-item>1</van-swipe-item>
         <van-swipe-item>2</van-swipe-item>
         <van-swipe-item>3</van-swipe-item>
@@ -85,7 +72,7 @@ export default {
       title2: '图片懒加载',
       title3: '监听 change 事件',
       title4: '纵向滚动',
-      title5: '设置滑块大小',
+      title5: '自定义滑块大小',
       title6: '自定义指示器',
       message: '当前 Swipe 索引：'
     },
@@ -93,7 +80,7 @@ export default {
       title2: 'Image Lazyload',
       title3: 'Change Event',
       title4: 'Vertical Scrolling',
-      title5: 'Set Swiper Item Size',
+      title5: 'Set SwipeItem Size',
       title6: 'Custom indicator',
       message: 'Current Swipe index:'
     }
@@ -171,7 +158,7 @@ export default {
     padding: 2px 5px;
     color: @white;
     font-size: 12px;
-    background: rgba(0, 0, 0, .1);
+    background: rgba(0, 0, 0, 0.1);
   }
 }
 </style>