s-tab添加横向滚动支持

packages/components/STab/index.vue

 <template>
-  <section :class="[c(),tabCss, cusClass]">
-    <slot/>
+  <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">
-      <div class="h-item">
-        <slot/>
-      </div>
-    </section>
+  <section class="h-tab-item" @click="titleClick">
+    <div class="h-item">
+      <slot/>
+    </div>
     <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,27 +70,25 @@ export default {
           align-items: center;
           justify-content: center;
           padding: 0 3px;
-          border-bottom: 1px solid rgba(255,255,255,.0); /*no*/
+          border-bottom: 1px solid rgba(255, 255, 255, .0); /*no*/
         }
 
-      }
-      .tab-divider {
-        width: 1px; /*no*/
-        height: 50%;
-        background-color: rgb(214, 217, 218);
-      }
-
-      &.activated {
-        .h-tab-item {
+        &.activated {
           .h-item {
             color: #1e8ceb;
             border-bottom: 1px solid #1e8ceb; /*no*/
           }
         }
-      }
-      &:last-child {
         .tab-divider {
-          width: 0px;
+          width: 1px; /*no*/
+          height: 50%;
+          background-color: rgb(214, 217, 218);
+        }
+
+        &:last-child {
+          .tab-divider {
+            width: 0px;
+          }
         }
       }
     }

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,26 +169,31 @@ export default {
     init () {
       let vm = this
       vm.clear()
-
-      if (vm.$el) {
-        vm.width = vm.$el.offsetWidth || document.documentElement.offsetWidth
-        vm.height = vm.$el.offsetHeight || document.documentElement.offsetHeight
+      if (vm.defaultWidth) {
+        vm.width = vm.defaultWidth
+      } else if (vm.defaultHeight) {
+        vm.hight = vm.defaultHeight
       } else {
-        // 获取窗口宽度
-        if (window.innerWidth) { vm.width = window.innerWidth } else if ((document.body) && (document.body.clientWidth)) {
-          vm.width = document.body.clientWidth
+        if (vm.$el) {
+          vm.width = vm.$el.offsetWidth || document.documentElement.offsetWidth
+          vm.height = vm.$el.offsetHeight || document.documentElement.offsetHeight
+        } else {
+          // 获取窗口宽度
+          if (window.innerWidth) { vm.width = window.innerWidth } else if ((document.body) && (document.body.clientWidth)) {
+            vm.width = document.body.clientWidth
+          }
+          if (window.innerHeight) { vm.height = window.innerHeight } else if ((document.body) && (document.body.clientHeight)) { vm.height = document.body.clientHeight }
+          // 通过深入Document内部对body进行检测，获取窗口大小
+          if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
+            vm.height = document.documentElement.clientHeight
+            vm.width = document.documentElement.clientWidth
+          }
         }
-        if (window.innerHeight) { vm.height = window.innerHeight } else if ((document.body) && (document.body.clientHeight)) { vm.height = document.body.clientHeight }
-        // 通过深入Document内部对body进行检测，获取窗口大小
-        if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
-          vm.height = document.documentElement.clientHeight
-          vm.width = document.documentElement.clientWidth
+        if (!vm.width) {
+          vm.width = 375
+          vm.height = 667
         }
       }
-      if (!vm.width) {
-        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,12 +9,20 @@
         操作
       </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>-->
+   <!-- <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">
       <h-button class="button-class" type="primary" @click.native="showLoading">showLoading</h-button>
@@ -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>
@@ -85,7 +93,7 @@
       </swipe>
 
       <h2 class="item-title">纵向滚动</h2>
-      <swipe :vertical="true" style="height: 200px">
+      <swipe :vertical="true"  style="height: 200px">
         <swipe-item v-for="key in count" :key="key" :style="{'background': bgColor[key-1]}">
           <div class="item-bg">{{ key-1 }}</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%;
     }