s-tab添加横向滚动支持

packages/components/STab/index.vue

 <template>
-  <section :class="[c(),tabCss, cusClass]">
+  <section :class="[c(),tabCss, cusClass,overFlow]">
+    <section :style="transform" class="tab-content">
       <slot/>
     </section>
+  </section>
 </template>
 <script>
-import {base} from '../../common/mixins'
+import { base } from '../../common/mixins'
 import stabItem from './tab-item'
 
 export default {
   name: 'SwitchTab',
   mixins: [base],
-  component: {stabItem},
+  component: { stabItem },
   props: {
     position: {
       type: String,
@@ -28,15 +30,24 @@ export default {
       type: Boolean,
       default: false,
     },
+    overflowX: {
+      type: Boolean,
+      default: false,
+    },
   },
   data () {
     return {
       items: [],
       length: '',
       activedIndex: '',
+      deviceWidth: window.innerWidth,
+      translate: 0,
     }
   },
   computed: {
+    overFlow () {
+      return this.overflowX ? 'auto-overflow-x' : ''
+    },
     tabCss () {
       return this.position === 'top' ? this.c('top') : this.c('bottom')
     },
@@ -54,37 +65,72 @@ export default {
       }
       return vm.index
     },
+
+    transform () {
+      return {
+        transform: 'translateX(' + this.translate + 'px' + ')',
+      }
+    },
   },
   mounted () {
     let vm = this
     this.items[vm.current].$el.classList.add('activated')
+    this.scrollToActiveTab(vm.current, this.items[vm.current].$el.clientWidth)
   },
   methods: {
-    actived (index) {
+    actived (index, clientWidth) {
       this.activedIndex = index
       this.$emit('tabClick', index)
+
+      this.scrollToActiveTab(index, clientWidth)
+    },
+
+    scrollToActiveTab (index, width) {
+      index += 1
+      let vm = this
+      let count = Math.floor(vm.deviceWidth / width)
+      let overFlowWinth = vm.deviceWidth - count * width
+      let num
+      if (index > count) {
+        num = index - count
+      } else {
+        num = 0
+      }
+      if (num === 0) {
+        vm.translate = -num * width
+      } else {
+        vm.translate = -num * width + overFlowWinth
+      }
     },
   },
 }
 </script>
 
 <style lang="less">
+  .auto-overflow-x {
+    overflow-x: auto;
+  }
+
   .hls-switch-tab {
     width: 100%;
     position: absolute;
     z-index: 1;
     display: flex;
-    justify-content: space-around;
+    // justify-content: space-around;
     height: 40px;
     background-color: #fff;
+
     &-top {
       top: 0;
+
       &:after {
         .setBottomLine();
       }
     }
+
     &-bottom {
       bottom: 0;
+
       &:before {
         .setTopLine();
       }

packages/components/STab/tab-item.vue

 <template>
-  <section class="tab-content" @click="titleClick">
-    <section class="h-tab-item">
+  <section class="h-tab-item" @click="titleClick">
     <div class="h-item">
       <slot/>
     </div>
-    </section>
     <div v-show="showDivider" class="tab-divider"/>
   </section>
+
 </template>
 
 <script>
 export default {
   name: 'TabItem',
   data () {
-    return {}
+    return {
+
+    }
   },
   computed: {
     showDivider () {
@@ -36,8 +37,10 @@ export default {
       let clickIndex = Number(event.currentTarget.getAttribute('data-index'))
       event.currentTarget.classList.remove('activated')
       event.currentTarget.classList.add('activated')
-      vm.$parent.actived(clickIndex)
+      let clientWidth = event.currentTarget.clientWidth
+      vm.$parent.actived(clickIndex, clientWidth)
     },
+
   },
 }
 </script>
@@ -48,7 +51,6 @@ export default {
     .tab-content {
       width: 100%;
       display: flex;
-      justify-content: space-around;
       align-items: center;
 
       .h-tab-item {
@@ -57,6 +59,7 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
+
         .h-item {
           //width: 100%;
           font-size: 14px;
@@ -67,24 +70,21 @@ export default {
           align-items: center;
           justify-content: center;
           padding: 0 3px;
-          border-bottom: 1px solid rgba(255,255,255,.0); /*no*/
-        }
-
-      }
-      .tab-divider {
-        width: 1px; /*no*/
-        height: 50%;
-        background-color: rgb(214, 217, 218);
+          border-bottom: 1px solid rgba(255, 255, 255, .0); /*no*/
         }
 
         &.activated {
-        .h-tab-item {
           .h-item {
             color: #1e8ceb;
             border-bottom: 1px solid #1e8ceb; /*no*/
           }
         }
+        .tab-divider {
+          width: 1px; /*no*/
+          height: 50%;
+          background-color: rgb(214, 217, 218);
         }
+
         &:last-child {
           .tab-divider {
             width: 0px;
@@ -92,5 +92,6 @@ export default {
         }
       }
     }
+  }
 
 </style>

packages/components/Swipe/index.vue

@@ -90,6 +90,14 @@ export default {
       type: Boolean,
       default: true,
     },
+    defaultWidth: {
+      type: Number,
+      default: 0,
+    },
+    defaultHeight: {
+      type: Number,
+      default: 0,
+    },
     cusClass: {
       type: String,
       default: '',
@@ -161,7 +169,11 @@ export default {
     init () {
       let vm = this
       vm.clear()
-
+      if (vm.defaultWidth) {
+        vm.width = vm.defaultWidth
+      } else if (vm.defaultHeight) {
+        vm.hight = vm.defaultHeight
+      } else {
         if (vm.$el) {
           vm.width = vm.$el.offsetWidth || document.documentElement.offsetWidth
           vm.height = vm.$el.offsetHeight || document.documentElement.offsetHeight
@@ -181,6 +193,7 @@ export default {
           vm.width = 375
           vm.height = 667
         }
+      }
       this.active = this.index
       this.offset = this.count > 1 ? -this.size * this.active : 0
       this.swipes.forEach(swipe => {

src/pages/hlsPopup.vue

@@ -9,11 +9,19 @@
         操作
       </div>
     </h-header>
-    <!--    <s-tab @tabClick="stablick" cusClass="popup-tab">
-          <tab-item>测试</tab-item>
-          <tab-item>你好</tab-item>
-          <tab-item>再见</tab-item>
-          <tab-item>按钮</tab-item>
+   <!-- <s-tab :overflowX="true" :showDivider="true" class="has-header" :defaultActive="6">
+      <tab-item>工商资料</tab-item>
+      <tab-item>股东成员</tab-item>
+      <tab-item>对外投资</tab-item>
+      <tab-item>工商变更</tab-item>
+      <tab-item>企业年报</tab-item>
+      <tab-item>关联情报</tab-item>
+      <tab-item>开庭公告</tab-item>
+      <tab-item>裁判文书</tab-item>
+      <tab-item>执行记录</tab-item>
+      <tab-item>失信记录</tab-item>
+      <tab-item>涉诉公告</tab-item>
+      <tab-item>司法协助</tab-item>
     </s-tab>-->
     <h-content
       class="has-header has-footer">
@@ -72,7 +80,7 @@
       <h-button class="button-class radius-small" disabled>基础按钮(禁用)</h-button>
 
       <h2 class="item-title">Swip基础使用</h2>
-      <swipe :interval="5000" @start="start" @move="move" @change="change">
+      <swipe :interval="5000" @start="start" @move="move" @change="change" :defaultWidth="200">
         <swipe-item>
           <div :style="{'background': bgColor[0]}" class="item-bg">0</div>
         </swipe-item>
@@ -660,6 +668,13 @@ export default {
   .hls-popup {
     height: 100%;
     width: 100%;
+    .hls-switch-tab {
+      .tab-content .h-tab-item .h-item{
+        width: 80px;
+      }
+
+    }
+
     .vue-better-scroll__wrapper {
       width: 100%;
     }