tabs组件支持滑动 (#52)

packages/dialog/src/dialog.js

@@ -32,6 +32,7 @@ const showNextDialog = () => {
     initInstance();
   }
 
+  /* istanbul ignore else */
   if (!instance.value && dialogQueue.length > 0) {
     currentDialog = dialogQueue.shift();
 

packages/image-preview/src/image-preview.js

@@ -6,6 +6,7 @@ let instance;
 const ImagePreviewConstructor = Vue.extend(ImagePreview);
 
 const initInstance = () => {
+  /* istanbul ignore if */
   if (Vue.prototype.$isServer) return;
   instance = new ImagePreviewConstructor({
     el: document.createElement('div')
@@ -13,6 +14,7 @@ const initInstance = () => {
 };
 
 var ImagePreviewBox = images => {
+  /* istanbul ignore if */
   if (Vue.prototype.$isServer) return;
   if (!instance) {
     initInstance();

packages/image-preview/src/image-preview.vue

@@ -92,6 +92,7 @@ export default {
     const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
     const container = this.$refs.previewContainer;
 
+    /* istanbul ignore else */
     if (supportTouch) {
       let touchStartTime;
 
@@ -99,6 +100,7 @@ export default {
         touchStartTime = new Date();
       });
       container.addEventListener('touchend', () => {
+        /* istanbul ignore else */
         if (new Date() - touchStartTime < 1500) {
           this.value = false;
         }

packages/picker/src/picker-column.vue

@@ -194,6 +194,7 @@ export default {
         },
 
         end: () => {
+          /* istanbul ignore else */
           if (this.isDragging) {
             this.isDragging = false;
 

packages/tab/src/swipe.js

@@ -0,0 +1,46 @@
+import Vue from 'vue';
+
+let isSwiping = false;
+
+const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
+
+export default function(element, options) {
+  const moveFn = function(event) {
+    if (options.drag) {
+      options.drag(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
+    }
+  };
+
+  const endFn = function(event) {
+    if (!supportTouch) {
+      document.removeEventListener('mousemove', moveFn);
+      document.removeEventListener('mouseup', endFn);
+    }
+
+    isSwiping = false;
+
+    if (options.end) {
+      options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
+    }
+  };
+
+  element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) {
+    if (isSwiping) return;
+
+    if (!supportTouch) {
+      document.addEventListener('mousemove', moveFn);
+      document.addEventListener('mouseup', endFn);
+    }
+    isSwiping = true;
+
+    if (options.start) {
+      options.start(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
+    }
+  });
+
+  if (supportTouch) {
+    element.addEventListener('touchmove', moveFn);
+    element.addEventListener('touchend', endFn);
+    element.addEventListener('touchcancel', endFn);
+  }
+};

packages/tab/src/tabs.vue

@@ -1,8 +1,26 @@
 <template>
   <div class="van-tabs" :class="[`van-tabs--${type}`]">
+    <div class="van-tabs__nav-wrap" v-if="type === 'line' && tabs.length > 4">
+      <div class="van-tabs__swipe" ref="swipe">
+        <div class="van-tabs__nav van-tabs__nav--line">
+          <div class="van-tabs__nav-bar" :style="navBarStyle"></div>
+          <div
+            v-for="(tab, index) in tabs"
+            :key="index"
+            class="van-tab"
+            :class="{'van-tab--active': index === curActive}"
+            ref="tabkey"
+            @click="handleTabClick(index, tab)"
+          >
+            {{ tab.title }}
+          </div>
+        </div>
+      </div>
+    </div>
     <div
+      v-else
       class="van-tabs__nav"
-      :class="[`van-tabs__nav--${this.type}`, `van-tabs--col-${this.tabs.length}`]"
+      :class="[`van-tabs__nav--${this.type}`]"
     >
       <div class="van-tabs__nav-bar" :style="navBarStyle" v-if="type === 'line'"></div>
       <div
@@ -23,6 +41,9 @@
 </template>
 
 <script>
+  import swipe from './swipe';
+  import translateUtil from 'src/utils/transition';
+
   export default {
     name: 'van-tabs',
 
@@ -48,13 +69,21 @@
       return {
         tabs: [],
         isReady: false,
-        curActive: +this.active
+        curActive: +this.active,
+        isSwiping: false
       };
     },
 
     watch: {
       active(val) {
         this.curActive = +val;
+      },
+
+      curActive() {
+        /* istanbul ignore else */
+        if (this.tabs.length > 4) {
+          this.doOnValueChange();
+        }
       }
     },
 
@@ -72,12 +101,38 @@
 
         return {
           width: offsetWidth,
-          transform: `translate3d(${offsetLeft}, 0px, 0px)`,
+          transform: `translate3d(${offsetLeft}, 0, 0)`,
           transitionDuration: `${this.duration}s`
         };
+      },
+      swipeWidth() {
+        return this.$refs.swipe && this.$refs.swipe.getBoundingClientRect().width;
+      },
+      maxTranslate() {
+        /* istanbul ignore if */
+        if (!this.$refs.tabkey) return;
+
+        const lastTab = this.$refs.tabkey[this.tabs.length - 1];
+        const lastTabWidth = lastTab.offsetWidth;
+        const lastTabOffsetLeft = lastTab.offsetLeft;
+
+        return (lastTabOffsetLeft + lastTabWidth) - this.swipeWidth;
       }
     },
 
+    mounted() {
+      // 页面载入完成
+      this.$nextTick(() => {
+        // 可以开始触发在computed中关于nav-bar的css动画
+        this.isReady = true;
+        this.initEvents();
+  
+        if (this.tabs.length > 4) {
+          this.doOnValueChange();
+        }
+      });
+    },
+
     methods: {
       /**
        * tab点击事件
@@ -93,15 +148,67 @@
 
         this.$emit('click', index);
         this.curActive = index;
-      }
-    },
+      },
 
-    mounted() {
-      // 页面载入完成
-      this.$nextTick(() => {
-        // 可以开始触发在computed中关于nav-bar的css动画
-        this.isReady = true;
-      });
+      /**
+       * 将当前value值转换为需要translate的值
+       */
+      value2Translate(value) {
+        /* istanbul ignore if */
+        if (!this.$refs.tabkey) return 0;
+
+        const tab = this.$refs.tabkey[value];
+        const maxTranslate = this.maxTranslate;
+        const tabWidth = tab.offsetWidth;
+        const tabOffsetLeft = tab.offsetLeft;
+        let translate = tabOffsetLeft + (tabWidth * 2.7) - this.swipeWidth;
+        if (translate < 0) {
+          translate = 0;
+        }
+
+        return -1 * (translate > maxTranslate ? maxTranslate : translate);
+      },
+
+      initEvents() {
+        const el = this.$refs.swipe;
+        if (!el) return;
+
+        let swipeState = {};
+
+        swipe(el, {
+          start: event => {
+            swipeState = {
+              start: new Date(),
+              startLeft: event.pageX,
+              startTranslateLeft: translateUtil.getElementTranslate(el).left
+            };
+          },
+
+          drag: event => {
+            this.isSwiping = true;
+
+            swipeState.left = event.pageX;
+            const deltaX = swipeState.left - swipeState.startLeft;
+            const translate = swipeState.startTranslateLeft + deltaX;
+
+            /* istanbul ignore else */
+            if (translate > 0 || (translate * -1) > this.maxTranslate ) return;
+
+            translateUtil.translateElement(el, translate, null);
+          },
+
+          end: () => {
+            this.isSwiping = false;
+          }
+        })
+      },
+
+      doOnValueChange() {
+        const value = +this.curActive;
+        const swipe = this.$refs.swipe;
+
+        translateUtil.translateElement(swipe, this.value2Translate(value), null);
+      }
     }
   };
 </script>

packages/vant-css/src/tab.css

@@ -5,27 +5,20 @@
   @b tabs {
     position: relative;
 
-    @m col-2 {
-      .van-tab {
-        width: 50%;
-      }
+    @e nav-wrap {
+      overflow: hidden;
     }
 
-    @m col-3 {
-      .van-tab {
-        width: 33.33333333333333%;
-      }
-    }
+    @e swipe {
+      user-select: none;
+      transition: transform ease .3s;
 
-    @m col-4 {
       .van-tab {
-        width: 25%;
+        flex: 0 0 22%;
       }
-    }
 
-    @m col-5 {
-      .van-tab {
-        width: 20%;
+      .van-tabs__nav {
+        overflow: visible;
       }
     }
 
@@ -33,16 +26,15 @@
       overflow: hidden;
       transition: transform .5s cubic-bezier(.645, .045, .355, 1);
       position: relative;
+      display: flex;
 
       @m line {
         height: 44px;
-        background-color: $c-white;
-        &::after {
-          @mixin border-retina (top);
-          @mixin border-retina (bottom);
-        }
-        @b tabs-nav-bar {
-          display: block;
+
+        .van-tab {
+          &::after {
+            @mixin border-retina (top, bottom);
+          }
         }
       }
 
@@ -55,14 +47,16 @@
         overflow: hidden;
 
         .van-tab {
-          color: #666666;
+          color: #666;
           line-height: 28px;
-          border-right: 1px solid #666666;
+          border-right: 1px solid #666;
+
           &:last-child {
             border-right: none;
           }
+
           &.van-tab--active {
-            background-color: #666666;
+            background-color: #666;
             color: $c-white;
           }
         }
@@ -82,13 +76,16 @@
   }
 
   @b tab {
+    position: relative;
     color: $c-black;
+    background-color: $c-white;
     font-size: 14px;
     line-height: 44px;
     box-sizing: border-box;
     cursor: pointer;
     text-align: center;
-    float: left;
+    flex: 1;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
 
     @m active {
       color: #FF4444;