feat: 增加tabs滚动居中功能

src/packages/tab/demo.vue

@@ -3,10 +3,10 @@
     <!-- DEMO区域 -->
     <h4>默认用法</h4>
     <nut-tab @tab-switch="tabSwitch">
-      <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
-      <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
-      <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
-      <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
+        <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
+        <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
+        <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
+        <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
     </nut-tab>
 
     <h4>支持导航条在上下左右位置</h4>
@@ -37,7 +37,7 @@
         v-html="value.content"
       ></nut-tab-panel>
     </nut-tab>
-
+    
     <nut-tab @tab-switch="tabSwitch" position-nav="bottom">
       <nut-tab-panel
         v-for="value in editableTabs"
@@ -50,24 +50,25 @@
 
     <h4>支持滑动选择多个页签</h4>
     <nut-tab @tab-switch="tabSwitch" :is-scroll="true">
-      <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
-      <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
-      <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
-      <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
-      <nut-tab-panel tab-title="页签5">页签5</nut-tab-panel>
-      <nut-tab-panel tab-title="页签6">页签6</nut-tab-panel>
-      <nut-tab-panel tab-title="页签7">页签7</nut-tab-panel>
+        <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
+        <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
+        <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
+        <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
+        <nut-tab-panel tab-title="页签5">页签5</nut-tab-panel>
+        <nut-tab-panel tab-title="页签6">页签6</nut-tab-panel>
+        <nut-tab-panel tab-title="页签7">页签7</nut-tab-panel>
     </nut-tab>
 
-    <h4>支持滑动选择多个页签</h4>
-    <nut-tab @tab-switch="tabSwitch" :is-scroll="true" position-nav="left">
-      <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
-      <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
-      <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
-      <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
-      <nut-tab-panel tab-title="页签5">页签5</nut-tab-panel>
-      <nut-tab-panel tab-title="页签6">页签6</nut-tab-panel>
-      <nut-tab-panel tab-title="页签7">页签7</nut-tab-panel>
+    <h4>支持滑动选择多个页签,设置tab高度为250</h4>
+    <nut-tab @tab-switch="tabSwitch" :is-scroll="true" position-nav="left" :wrapper-height="250">
+        <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
+        <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
+        <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
+        <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
+        <nut-tab-panel tab-title="页签5">页签5</nut-tab-panel>
+        <nut-tab-panel tab-title="页签6">页签6</nut-tab-panel>
+        <nut-tab-panel tab-title="页签7">页签7</nut-tab-panel>
+        <nut-tab-panel tab-title="页签8">页签8</nut-tab-panel>
     </nut-tab>
 
     <h4>禁止选中，默认选中某个标签</h4>
@@ -91,112 +92,129 @@
 
 <script>
 export default {
-  components: {},
+  components:{
+  },
   data() {
     return {
-      defIndex: 1,
-      positionNavCurr: 'top',
+      defIndex:1,
+      positionNavCurr: "top",
       editableTabs: [
         {
-          tabTitle: '衣物',
-          iconUrl: 'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
-          content: '<p>衣物内容</p>'
+          tabTitle: "衣物",
+          iconUrl:
+            "http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg",
+          content: "<p>衣物内容</p>"
         },
         {
-          tabTitle: '日用品',
-          iconUrl: 'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
-          content: '<p>日用品内容</p>'
+          tabTitle: "日用品",
+          iconUrl:
+            "http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg",
+          content: "<p>日用品内容</p>"
         },
         {
-          tabTitle: '器材',
-          iconUrl: 'http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg',
-          content: '<p>运动器材内容</p>'
+          tabTitle: "器材",
+          iconUrl:
+            "http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg",
+          content: "<p>运动器材内容</p>"
         },
         {
-          tabTitle: '电影票',
-          iconUrl: 'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
-          content: '<p>电影票内容</p>'
+          tabTitle: "电影票",
+          iconUrl:
+            "http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg",
+          content: "<p>电影票内容</p>"
         }
       ],
       disableTabs: [
         {
-          tabTitle: '衣物',
+          tabTitle: "衣物",
           disable: false,
-          iconUrl: 'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
-          content: '<p>衣物内容</p>'
+          iconUrl:
+            "http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg",
+          content: "<p>衣物内容</p>"
         },
         {
-          tabTitle: '日用品',
-          iconUrl: 'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
-          content: '<p>日用品内容</p>'
+          tabTitle: "日用品",
+          iconUrl:
+            "http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg",
+          content: "<p>日用品内容</p>"
         },
         {
-          tabTitle: '运动器材',
-          iconUrl: 'http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg',
-          content: '<p>运动器材内容</p>'
+          tabTitle: "运动器材",
+          iconUrl:
+            "http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg",
+          content: "<p>运动器材内容</p>"
         },
         {
-          tabTitle: '电影票',
-          iconUrl: 'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
-          content: '<p>电影票内容</p>'
+          tabTitle: "电影票",
+          iconUrl:
+            "http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg",
+          content: "<p>电影票内容</p>"
         }
       ]
     };
   },
   methods: {
     tabSwitch: function(index, event) {
-      console.log(index + '--' + event);
+      console.log(index + "--" + event);
       //this.defIndex = index;
     },
-    clickHandler: function() {
+    clickHandler:function(){
       let newEditableTabs = [
         {
-          tabTitle: '衣物2',
-          iconUrl: 'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
-          content: '<p>改变衣物内容</p>'
+          tabTitle: "衣物2",
+          iconUrl:
+            "http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg",
+          content: "<p>改变衣物内容</p>"
         },
         {
-          tabTitle: '日用品2',
-          iconUrl: 'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
-          content: '<p>改变日用品内容</p>'
+          tabTitle: "日用品2",
+          iconUrl:
+            "http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg",
+          content: "<p>改变日用品内容</p>"
         },
         {
-          tabTitle: '器材2',
-          iconUrl: 'http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg',
-          content: '<p>改变运动器材内容</p>'
+          tabTitle: "器材2",
+          iconUrl:
+            "http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg",
+          content: "<p>改变运动器材内容</p>"
         },
         {
-          tabTitle: '电影票2',
-          iconUrl: 'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
-          content: '<p>改变电影票内容</p>'
+          tabTitle: "电影票2",
+          iconUrl:
+            "http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg",
+          content: "<p>改变电影票内容</p>"
         }
-      ];
+      ]
       this.disableTabs = newEditableTabs;
     },
-    resetHandler: function() {
-      let newEditableTabs = [
+    resetHandler:function(){
+        let newEditableTabs = [
         {
-          tabTitle: '衣物',
+          tabTitle: "衣物",
           disable: false,
-          iconUrl: 'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
-          content: '<p>衣物内容</p>'
+          iconUrl:
+            "http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg",
+          content: "<p>衣物内容</p>"
         },
         {
-          tabTitle: '日用品',
-          iconUrl: 'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
-          content: '<p>日用品内容</p>'
+          tabTitle: "日用品",
+          iconUrl:
+            "http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg",
+          content: "<p>日用品内容</p>"
         },
         {
-          tabTitle: '运动器材',
-          iconUrl: 'http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg',
-          content: '<p>运动器材内容</p>'
+          tabTitle: "运动器材",
+          iconUrl:
+            "http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg",
+          content: "<p>运动器材内容</p>"
         },
         {
-          tabTitle: '电影票',
-          iconUrl: 'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
-          content: '<p>电影票内容</p>'
+          tabTitle: "电影票",
+          iconUrl:
+            "http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg",
+          content: "<p>电影票内容</p>"
         }
-      ];
+      ]
       this.disableTabs = newEditableTabs;
     }
   }
@@ -211,7 +229,7 @@ export default {
   .nut-title-nav-list {
     background: #fff;
     border-left: 1px solid #e4e7ed;
-    &:first-child {
+    &:first-child{
       border-left: 0;
     }
   }
@@ -219,6 +237,7 @@ export default {
     background: $primary-color;
     border: 0;
     transition: all 0.3s ease-in-out;
+
   }
   .nav-bar {
     background: $primary-color;
@@ -228,3 +247,4 @@ export default {
   }
 }
 </style>
+

src/packages/tab/doc.md

@@ -88,17 +88,19 @@ export default {
       <nut-tab-panel tab-title="页签7">页签7</nut-tab-panel>
   </nut-tab>
 ```
+## 支持滑动选择多个页签,设置tab高度为250,注意只有在 is-scroll = true的情况下，设置的 wrapper-height 才有效
 
 ```html
-  <nut-tab @tab-switch="tabSwitch" :is-scroll="true" position-nav="left">
-      <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
-      <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
-      <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
-      <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
-      <nut-tab-panel tab-title="页签5">页签5</nut-tab-panel>
-      <nut-tab-panel tab-title="页签6">页签6</nut-tab-panel>
-      <nut-tab-panel tab-title="页签7">页签7</nut-tab-panel>
-  </nut-tab>
+<nut-tab @tab-switch="tabSwitch" :is-scroll="true" position-nav="left" :wrapper-height="250">
+    <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
+    <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
+    <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
+    <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
+    <nut-tab-panel tab-title="页签5">页签5</nut-tab-panel>
+    <nut-tab-panel tab-title="页签6">页签6</nut-tab-panel>
+    <nut-tab-panel tab-title="页签7">页签7</nut-tab-panel>
+    <nut-tab-panel tab-title="页签8">页签8</nut-tab-panel>
+</nut-tab>
 ```
 
 ## 禁止选中，默认选中某个标签,如需更新数组后，重新渲染Tab页面，请将更新数组传入init-data
@@ -229,6 +231,7 @@ export default {
 | init-data | 监听数据变化，渲染更新页面 | Array | []
 | is-show-line|是否显示tab切换时的红条|Boolean|true|
 | is-scroll|是否支持滑动选择多个页签|Boolean|false|
+| wrapper-height |设置tab的高度，只有在 is-scroll=true；positionNav=left或者right 的情况下有效|Number/String|200|
 
 ### nut-tab-panel
 

src/packages/tab/index.js

@@ -5,4 +5,4 @@ Tab.install = function(Vue) {
   Vue.component(Tab.name, Tab);
 };
 
-export default Tab;
+export default Tab;

src/packages/tab/tab.scss

@@ -1,237 +1,242 @@
 .nut-tab {
-  position: relative;
-  border: 1px solid #eee;
-  padding: 10px;
-  font-size: 12px;
-  background: #eee;
-}
-.nut-tab-horizontal {
-  display: flex;
-  flex-direction: row;
-  position: relative;
-}
-
-.close-btn {
-  position: absolute;
-  width: 17px;
-  height: 17px;
-  text-align: center;
-  line-height: 14px;
-  font-size: 16px;
-  background: #999;
-  font-weight: normal;
-  color: #fff;
-  right: 0px;
-  top: 0px;
-  border-radius: 50%;
-}
-.nut-tab-horizontal .close-btn {
-  position: absolute;
-  width: 17px;
-  height: 17px;
-  text-align: center;
-  line-height: 14px;
-  font-size: 16px;
-  background: #999;
-  font-weight: normal;
-  color: #fff;
-  right: 0px;
-  top: 0px;
-  border-radius: 50%;
-}
-.nut-tab-title {
-  //border:1px solid #fff;
-  border-bottom: 1px solid #ededed;
-  width: 100%;
-  display: flex;
-  height: 50px;
-  line-height: 48px;
-  box-sizing: border-box;
-  position: relative;
-  overflow-x: auto;
-  overflow-y: hidden;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-.nav-bar {
-  position: absolute;
-  height: 2px;
-  bottom: 0px;
-  left: 0px;
-  z-index: 2;
-  background: $primary-color;
-  transition: all 0.3s ease-in-out;
-}
-.nut-tab-title-leftnav {
-  border-right: 1px solid #ededed;
-  width: 100px;
-  display: flex;
-  background: #fff;
-  flex-direction: column;
-  position: relative;
-  height: 200px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  .nav-bar-left {
+    position: relative;
+    border: 1px solid #eee;
+    padding: 10px;
+    font-size: 12px;
+    background: #eee;
+  }
+  .nut-tab-horizontal {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+  }
+  
+  .close-btn {
     position: absolute;
-    width: 2px;
+    width: 17px;
+    height: 17px;
+    text-align: center;
+    line-height: 14px;
+    font-size: 16px;
+    background: #999;
+    font-weight: normal;
+    color: #fff;
     right: 0px;
     top: 0px;
-    z-index: 2;
-    background: $primary-color;
-    transition: all 0.3s ease-in-out;
+    border-radius: 50%;
   }
-  .nut-title-nav {
-    border: 0;
-    border-left: 1px solid #f5f7fa;
-  }
-  .nut-tab-active {
-    background: #fff;
-    //   a{
-    //     color: red;
-    //   }
-  }
-}
-.nut-tab-title-rightnav {
-  background: #fff;
-  // border: 1px solid #fff;
-  border-left: 1px solid #ededed;
-  width: 100px;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  overflow-y: auto;
-  overflow-x: hidden;
-  height: 200px;
-  box-sizing: border-box;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  .nav-bar-right {
+  .nut-tab-horizontal .close-btn {
     position: absolute;
-    width: 2px;
-    left: 0px;
+    width: 17px;
+    height: 17px;
+    text-align: center;
+    line-height: 14px;
+    font-size: 16px;
+    background: #999;
+    font-weight: normal;
+    color: #fff;
+    right: 0px;
     top: 0px;
-    z-index: 2;
-    background: $primary-color;
-    transition: all 0.3s ease-in-out;
+    border-radius: 50%;
+  }
+  .nut-tab-title {
+    //border:1px solid #fff;
+    border-bottom: 1px solid #ededed;
+    scroll-behavior: smooth;
+    width: 100%;
+    display: flex;
+    height: 50px;
+    line-height: 48px;
+    box-sizing: border-box;
+    position: relative;
+    overflow-x: auto;
+    overflow-y: hidden;
+    &::-webkit-scrollbar {
+        display: none;
+    }
   }
-}
-.nut-tab-link {
-  color: #333;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  text-decoration: none;
-  line-height: 1;
-  width: 100%;
-  height: 100%;
-}
-.nut-tab-title-bottomnav {
-  border: 1px solid #fff;
-  border-top: 1px solid #ededed;
-  width: 100%;
-  display: flex;
-  height: 50px;
-  line-height: 49px;
-  box-sizing: border-box;
-  position: relative;
-  overflow-x: auto;
-  overflow-y: hidden;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  .nav-bar-bottom {
+  .nav-bar {
     position: absolute;
     height: 2px;
+    bottom: 0px;
     left: 0px;
-    top: 0px;
     z-index: 2;
     background: $primary-color;
     transition: all 0.3s ease-in-out;
   }
-}
-
-.nut-title-nav-list {
-  flex: 1;
-  position: relative;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  background: #fff;
-  box-sizing: border-box;
-}
-.nut-title-nav-leftnav {
-  flex: 1;
-  display: flex;
-  padding-left: 5px;
-  //justify-content: center;
-  align-items: center;
-  position: relative;
-}
-.nut-title-nav-rightnav {
-  flex: 1;
-  display: flex;
-  padding-right: 5px;
-  justify-content: flex-end;
-  align-items: center;
-  position: relative;
-}
-.nut-title-nav-scroll {
-  min-width: 100px;
-  position: relative;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  background: #fff;
-  box-sizing: border-box;
-}
-.nut-title-vertical-scroll {
-  min-height: 55px;
-  position: relative;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  background: #fff;
-  box-sizing: border-box;
-}
-.nut-tab-icon {
-  display: inline-block;
-  margin-right: 5px;
-  width: 20px;
-  height: 20px;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
-.nut-tab-active {
-  background: #fff;
-  border: 0;
-  // a{
-  //     color: red;
-  // }
-}
-.nut-tab-item {
-  height: 200px;
-  border: 1px solid #fff;
-  background: #fff;
-  width: 100%;
-  padding: 10px;
-  box-sizing: border-box;
-  .hide {
-    display: none;
-  }
-}
-.nut-tab-disable {
-  background: #e1e1e1 !important;
-}
-.tabbar-nav-word {
-  font-size: $font-size-small;
-}
+  .nut-tab-title-leftnav {
+    border-right: 1px solid #ededed;
+    scroll-behavior: smooth;
+    width: 100px;
+    display: flex;
+    background: #fff;
+    flex-direction: column;
+    position: relative;
+    // height: 200px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+    .nav-bar-left {
+      position: absolute;
+      width: 2px;
+      right: 0px;
+      top: 0px;
+      z-index: 2;
+      background: $primary-color;
+      transition: all 0.3s ease-in-out;
+    }
+    .nut-title-nav {
+      border: 0;
+      border-left: 1px solid #f5f7fa;
+    }
+    .nut-tab-active {
+      background: #fff;
+      a{
+        color: red;
+      }
+    }
+  }
+  .nut-tab-title-rightnav {
+    background: #fff;
+    // border: 1px solid #fff;
+    scroll-behavior: smooth;
+    border-left: 1px solid #ededed;
+    width: 100px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow-y: auto;
+    overflow-x: hidden;
+    // height: 200px;
+    box-sizing: border-box;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+    .nav-bar-right {
+      position: absolute;
+      width: 2px;
+      left: 0px;
+      top: 0px;
+      z-index:2;
+      background: $primary-color;
+      transition: all 0.3s ease-in-out;
+    }
+  }
+  .nut-tab-link {
+    color: #333;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    text-decoration: none;
+    line-height: 1;
+    width: 100%;
+    height:100%;
+  }
+  .nut-tab-title-bottomnav {
+    border: 1px solid #fff;
+    scroll-behavior: smooth;
+    border-top: 1px solid #ededed;
+    width: 100%;
+    display: flex;
+    height: 50px;
+    line-height: 49px;
+    box-sizing: border-box;
+    position: relative;
+    overflow-x: auto;
+    overflow-y: hidden;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+    .nav-bar-bottom {
+      position: absolute;
+      height: 2px;
+      left: 0px;
+      top: 0px;
+      z-index: 2;
+      background: $primary-color;
+      transition: all 0.3s ease-in-out;
+    }
+  }
+  
+  .nut-title-nav-list {
+    flex: 1;
+    position: relative;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    background: #fff;
+    box-sizing: border-box;
+  }
+  .nut-title-nav-leftnav {
+    flex: 1;
+    display: flex;
+    padding-left: 5px;
+    //justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+  .nut-title-nav-rightnav {
+    flex: 1;
+    display: flex;
+    padding-right: 5px;
+    justify-content: flex-end;
+    align-items: center;
+    position: relative;
+  }
+  .nut-title-nav-scroll{
+    min-width: 100px;
+    position: relative;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    background: #fff;
+    box-sizing: border-box;
+  }
+  .nut-title-vertical-scroll{
+    min-height: 55px;
+    position: relative;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    background: #fff;
+    box-sizing: border-box;
+  }
+  .nut-tab-icon {
+    display: inline-block;
+    margin-right: 5px;
+    width: 20px;
+    height: 20px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+  .nut-tab-active {
+    background: #fff;
+    border: 0;
+    a{
+        color: red;
+    }
+  }
+  .nut-tab-item {
+    height: 200px;
+    border: 1px solid #fff;
+    background: #fff;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    .hide {
+      display: none;
+    }
+  }
+  .nut-tab-disable {
+    background: #e1e1e1 !important;
+  }
+  .tabbar-nav-word {
+    font-size: $font-size-small;
+  }
+  

src/packages/tab/tab.vue

@@ -4,20 +4,20 @@
       <div v-if="positionNav == 'right' || positionNav == 'bottom'" class="nut-tab-item" ref="items">
         <slot></slot>
       </div>
-      <div :class="titleClass" ref="navlist">
-        <b v-if="isShowLine" :class="navBarClass" :style="navBarStyle"></b>
-        <span
-          v-for="(value, index) in tabTitleList"
-          :key="index"
-          :class="[titleNavList, 'nut-title-nav', { 'nut-tab-disable': value.disable }, { 'nut-tab-active': activeIndex == index }]"
-        >
-          <a class="nut-tab-link" v-on:click="switchTab(index, $event, value.disable)">
-            <i class="nut-tab-icon" :style="{ backgroundImage: 'url(' + value.iconUrl + ')' }" v-if="value.iconUrl"></i>
-            {{ value.tabTitle }}
-          </a>
-        </span>
+      <div :class="titleClass"  ref="navlist" :style="customHeight">
+          <b v-if="isShowLine" :class="navBarClass" :style="navBarStyle"></b>
+          <span
+            v-for="(value, index) in tabTitleList"
+            :key="index"
+            :class="[titleNavList, 'nut-title-nav', { 'nut-tab-disable': value.disable }, { 'nut-tab-active': activeIndex == index }]"
+          >
+            <a class="nut-tab-link" v-on:click="switchTab(index, $event, value.disable)">
+              <i class="nut-tab-icon" :style="{ backgroundImage: 'url(' + value.iconUrl + ')' }" v-if="value.iconUrl"></i>
+              {{ value.tabTitle }}
+            </a>
+          </span>
       </div>
-      <div v-if="positionNav == 'top' || positionNav == 'left'" class="nut-tab-item" ref="items">
+      <div v-if="positionNav == 'top' || positionNav == 'left'" class="nut-tab-item" ref="items" :style="customHeight">
         <slot></slot>
       </div>
     </div>
@@ -27,9 +27,9 @@
 export default {
   name: 'nut-tab',
   props: {
-    isScroll: {
-      type: Boolean,
-      default: false
+    isScroll:{
+        type:Boolean,
+        default:false
     },
     isShowLine: {
       type: Boolean,
@@ -48,6 +48,10 @@ export default {
       default: function() {
         return [];
       }
+    },
+    wrapperHeight:{
+      type: [String,Number],
+      default: '200'
     }
   },
   data() {
@@ -55,7 +59,8 @@ export default {
       tabTitleList: [],
       activeIndex: this.defIndex,
       initX: '0',
-      navWidth: 0
+      navWidth: 0,
+      tapWidth:0
     };
   },
   watch: {
@@ -88,28 +93,38 @@ export default {
     },
     titleNavList: function() {
       if (this.positionNav == 'top' || this.positionNav == 'bottom') {
-        if (this.isScroll) {
-          return 'nut-title-nav-scroll';
+        if(this.isScroll){
+            return 'nut-title-nav-scroll';
         }
         return 'nut-title-nav-list';
-      } else {
-        if (this.isScroll) {
-          return 'nut-title-vertical-scroll';
+      }else{
+        if(this.isScroll){
+            return 'nut-title-vertical-scroll';
         }
         return 'nut-title-nav-' + this.positionNav + 'nav';
       }
+      
     },
     navBarStyle: function() {
       if (this.positionNav === 'top' || this.positionNav === 'bottom') {
-        return {
-          transform: `translateX(${this.initX}px)`,
-          width: this.navWidth + 'px'
-        };
+          return {
+            transform: `translateX(${this.initX}px)`,
+            width: this.navWidth + 'px'
+          };
       }
       return {
-        transform: `translateY(${this.initX}px)`,
-        height: this.navWidth + 'px'
+          transform: `translateY(${this.initX}px)`,
+          height: this.navWidth + 'px'
       };
+    },
+    customHeight:function(){
+      if(this.isScroll && (this.positionNav === 'left' || this.positionNav === 'right')){
+        return {
+          height:this.wrapperHeight+'px'
+        }
+      }else{
+        return null;
+      }
     }
   },
   mounted() {
@@ -123,6 +138,7 @@ export default {
         this.tabTitleList = [];
         this.activeIndex = this.defIndex;
         this.initTab([...this.$slots.default]);
+        
       });
     },
     initTab: function(slot) {
@@ -138,7 +154,7 @@ export default {
           this.tabTitleList.push(item);
           let slotElm = slot[i].elm;
           if (slotElm) {
-            slotElm.classList.add('hide');
+              slotElm.classList.add('hide');
             if (this.activeIndex == i) {
               slotElm.classList.remove('hide');
             }
@@ -146,24 +162,18 @@ export default {
         }
       }
       this.$nextTick(() => {
+        let tapWidth;
         if (this.positionNav == 'top' || this.positionNav == 'bottom') {
-          this.navWidth = this.$refs.navlist.querySelector('.nut-title-nav').offsetWidth;
-        } else {
-          this.navWidth = this.$refs.navlist.querySelector('.nut-title-nav').offsetHeight;
+            this.navWidth = this.$refs.navlist.querySelector('.nut-title-nav').offsetWidth;
+            tapWidth = this.$refs.navlist.offsetWidth;
+        }else{
+            this.navWidth = this.$refs.navlist.querySelector('.nut-title-nav').offsetHeight;
+            tapWidth = this.$refs.navlist.offsetHeight;
         }
         this.initX = parseInt(this.navWidth * this.defIndex);
+        this.tapWidth = tapWidth/2-this.navWidth/2;
       });
     },
-    getStyle: function(obj, styleName) {
-      if (!obj) {
-        return '';
-      }
-      if (obj.currentStyle) {
-        return obj.currentStyle[styleName];
-      } else {
-        return getComputedStyle(obj, null)[styleName];
-      }
-    },
     findParent(event, myclass) {
       let parentCpt = event.target;
       let flag = 0; //避免死循环
@@ -179,7 +189,12 @@ export default {
     switchTab: function(index, event, disable) {
       if (!disable) {
         this.activeIndex = index;
-        this.initX = parseInt(this.navWidth * index);
+        this.initX = parseInt(this.navWidth * index); 
+        if(this.positionNav == 'top' || this.positionNav == 'bottom'){
+            this.$refs.navlist.scroll(this.initX-this.tapWidth,0);
+        }else{
+            this.$refs.navlist.scroll(0, this.initX-this.tapWidth);
+        }   
         let nutTab = this.findParent(event, 'nut-tab-part');
         let items = this.$refs.items.children;
         for (let i = 0; i < items.length; i++) {