Merge pull request #4 from ElemeFE/notAnimateSingle

not animate when single
ElemeFE · Jan 31, 2016 · 2074c5b · 2074c5b
2 parents 0323f95 + 5f0a170
commit 2074c5b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 11 deletions.
diff --git a/example/index.html b/example/index.html
@@ -10,30 +10,42 @@
     .swipe {
       height: 200px;
       color: #fff;
+      font-size: 30px;
+      text-align: center;
     }
     .page1 {
-      background-color: blue;
+      background-color: #0089dc;
+      color: #fff;
     }
     .page2 {
-      background-color: yellow;
+      background-color: #ffd705;
       color: #000;
     }
     .page3 {
-      background-color: red;
+      background-color: #ff2d4b;
+      color: #fff;
     }
   </style>
 </head>
 <body>
   <swipe>
-    <swipe-item class="page1">SUPER BLUE!!</swipe-item>
-    <swipe-item class="page2">SUPER YELLOW!!</swipe-item>
-    <swipe-item class="page3">SUPER RED!!</swipe-item>
+    <swipe-item class="page1">饿了么</swipe-item>
+    <swipe-item class="page2">美团</swipe-item>
+    <swipe-item class="page3">百度</swipe-item>
   </swipe>
+
+  <br>
+
   <swipe :speed="900" :auto="0" :show-indicators="false">
-    <swipe-item class="page1">SUPER BLUE!!</swipe-item>
-    <swipe-item class="page2">SUPER YELLOW!!</swipe-item>
-    <swipe-item class="page3">SUPER RED!!</swipe-item>
+    <swipe-item class="page1">SINGLE PAGE</swipe-item>
+  </swipe>
+
+  <br>
+
+  <swipe :speed="900" :auto="0" :show-indicators="false" :no-drag="true">
+    <swipe-item class="page1">SINGLE PAGE</swipe-item>
   </swipe>
+
   <script src="../node_modules/vue/dist/vue.js"></script>
   <script src="/lib/vue-swipe.js"></script>
   <script type="text/javascript" src="/example/dist/build.js"></script>

diff --git a/src/swipe.vue b/src/swipe.vue
@@ -125,6 +125,11 @@
         default: true
       },
 
+      noDragWhenSingle: {
+        type: Boolean,
+        default: true
+      },
+
       prevent: {
         type: Boolean,
         default: false
@@ -414,6 +419,10 @@
         }, this.auto);
       }
 
+      this.reInitPages();
+
+      if (this.$children.length === 1 && this.noDragWhenSingle) return;
+
       var element = this.$el;
 
       element.addEventListener('touchstart', (event) => {
@@ -435,8 +444,6 @@
         this.doOnTouchEnd(event);
         this.dragging = false;
       });
-
-      this.reInitPages();
     }
   };
 </script>