fix: qq小程序tabs修复样式 (#2150) #2099

src/packages/__VUE/tabs/index.scss

@@ -35,6 +35,12 @@
       padding: 10px 0 !important;
       width: $tabs-vertical-titles-width;
       flex-shrink: 0;
+      .nut-tabs__list {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+      }
       &.scrollable {
         overflow-x: hidden;
         overflow-y: auto;
@@ -92,6 +98,12 @@
     background: $tabs-titles-background-color;
     border-radius: $tabs-titles-border-radius;
     flex-shrink: 0;
+    .nut-tabs__list {
+      width: 100%;
+      height: $tabs-horizontal-titles-height;
+      display: flex;
+      flex-shrink: 0;
+    }
     &.large {
       .nut-tabs__titles-item {
         font-size: $tabs-titles-item-large-font-size;

src/packages/__VUE/tabs/index.taro.vue

@@ -10,24 +10,26 @@
       :class="{ [type]: type, scrollable: titleScroll, [size]: size }"
       :style="tabsNavStyle"
     >
-      <slot v-if="$slots.titles" name="titles"></slot>
-      <template v-else>
-        <view
-          class="nut-tabs__titles-item taro"
-          :style="titleStyle"
-          @click="tabChange(item, index)"
-          :class="{ active: item.paneKey == modelValue, disabled: item.disabled }"
-          v-for="(item, index) in titles"
-          :key="item.paneKey"
-        >
-          <view class="nut-tabs__titles-item__line" :style="tabsActiveStyle" v-if="type == 'line'"></view>
-          <view class="nut-tabs__titles-item__smile" :style="tabsActiveStyle" v-if="type == 'smile'">
-            <nut-icon :color="color" name="joy-smile" />
+      <view class="nut-tabs__list">
+        <slot v-if="$slots.titles" name="titles"></slot>
+        <template v-else>
+          <view
+            class="nut-tabs__titles-item taro"
+            :style="titleStyle"
+            @click="tabChange(item, index)"
+            :class="{ active: item.paneKey == modelValue, disabled: item.disabled }"
+            v-for="(item, index) in titles"
+            :key="item.paneKey"
+          >
+            <view class="nut-tabs__titles-item__line" :style="tabsActiveStyle" v-if="type == 'line'"></view>
+            <view class="nut-tabs__titles-item__smile" :style="tabsActiveStyle" v-if="type == 'smile'">
+              <nut-icon :color="color" name="joy-smile" />
+            </view>
+            <view class="nut-tabs__titles-item__text" :class="{ ellipsis: ellipsis }">{{ item.title }} </view>
           </view>
-          <view class="nut-tabs__titles-item__text" :class="{ ellipsis: ellipsis }">{{ item.title }} </view>
-        </view>
-        <view v-if="canShowLabel" class="nut-tabs__titles-item nut-tabs__titles-placeholder"></view>
-      </template>
+          <view v-if="canShowLabel" class="nut-tabs__titles-item nut-tabs__titles-placeholder"></view>
+        </template>
+      </view>
     </Nut-Scroll-View>
     <view class="nut-tabs__content" :style="contentStyle">
       <slot name="default"></slot>