[Improvement] Swipe: add touchable prop (#975)

docs/demos/views/popup.vue

@@ -9,14 +9,12 @@
       <van-button @click="show2 = true;">{{ $t('button2') }}</van-button>
 
       <van-popup v-model="show2" position="bottom">
-        <van-tabs>
-          <van-tab title="Tab1">
-            <van-cell v-for="i in 20" :key="i" :title="`Item ${ i }`" />
-          </van-tab>
-          <van-tab title="Tab2">
-            Lorem ipsum dolor sit amet, quis interdum et sollicitudin consectetuer scelerisque, gravida nulla consequatur dis mauris non morbi, dictum leo enim elementum ac wisi nullam, nam orci erat. Ultrices est. Nunc penatibus vel varius odio. Ullamcorper placerat amet amet sed, urna tempor, elit elit at. Eget congue. Sed proin metus sapien libero, pulvinar ut, ut aenean fermentum magna placerat dapibus voluptas, sed at lacinia pede fermentum rutrum et. Vitae nulla sapien vel in hac felis, montes in donec nulla eu volutpat augue.
-          </van-tab>
-        </van-tabs>
+        <van-picker
+          show-toolbar
+          :columns="$t('columns')"
+          @confirm="show2 = false"
+          @cancel="show2 = false"
+        />
       </van-popup>
 
       <van-button @click="show3 = true">{{ $t('button4') }}</van-button>
@@ -46,7 +44,8 @@ export default {
       button3: '弹出 Dialog',
       button4: '顶部弹出',
       button5: '右侧弹出',
-      button6: '关闭弹层'
+      button6: '关闭弹层',
+      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
     },
     'en-US': {
       position: 'Position',
@@ -55,7 +54,8 @@ export default {
       button3: 'Show Dialog',
       button4: 'From Top',
       button5: 'From Right',
-      button6: 'Close Popup'
+      button6: 'Close Popup',
+      columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']
     }
   },
 
@@ -103,7 +103,6 @@ export default {
 
     &--bottom {
       width: 100%;
-      height: 200px;
       padding: 0;
       border-radius: 0;
     }

docs/markdown/en-US/swipe.md

@@ -84,9 +84,10 @@ export default {
 | autoplay | Autoplay interval (ms) | `Number` | - | - |
 | duration | Animation duration (ms) | `Number` | `500` | - |
 | loop | Whether to enable loop | `Boolean` | `true` | - |
+| vertical | Vertical Scrolling | `Boolean` | `false` | - |
+| touchable | Whether touchable | `Boolean` | `true` | - |
 | show-indicators | Whether to show indocators | `Boolean` | `true` | - |
 | initial-swipe | Index of initial swipe, start from 0 | `Number` | `0` | - |
-| vertical | Vertical Scrolling | `Boolean` | `false` | - |
 
 ### Event
 

docs/markdown/zh-CN/swipe.md

@@ -84,9 +84,10 @@ export default {
 | autoplay | 自动轮播间隔，单位为 ms | `Number` | - | - |
 | duration | 动画时长，单位为 ms | `Number` | `500` | - |
 | loop | 是否开启循环播放 | `Boolean` | `true` | - |
+| vertical | 是否为纵向滚动 | `Boolean` | `false` | - |
+| touchable | 是否可以通过手势滑动 | `Boolean` | `true` | - |
 | show-indicators | 是否显示指示器 | `Boolean` | `true` | - |
 | initial-swipe | 初始位置，从 0 开始算 | `Number` | `0` | - |
-| vertical | 纵向滚动 | `Boolean` | `false` | - |
 
 ### 事件
 

packages/swipe/index.vue

@@ -44,6 +44,10 @@ export default create({
       type: Boolean,
       default: true
     },
+    touchable: {
+      type: Boolean,
+      default: true
+    },
     initialSwipe: {
       type: Number,
       default: 0
@@ -149,6 +153,8 @@ export default create({
     },
 
     onTouchStart(event) {
+      if (!this.touchable) return;
+
       clearTimeout(this.timer);
 
       this.currentDuration = 0;
@@ -163,6 +169,8 @@ export default create({
     },
 
     onTouchMove(event) {
+      if (!this.touchable) return;
+
       const delta = this.vertical ? this.deltaY : this.deltaX;
 
       this.touchMove(event);
@@ -180,6 +188,8 @@ export default create({
     },
 
     onTouchEnd() {
+      if (!this.touchable) return;
+
       const { deltaX, deltaY } = this;
 
       if (deltaX) {