fix(tabs): taro env sticky tips bug #1889

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

@@ -1,4 +1,33 @@
-<template src="./template.html"></template>
+<template>
+  <view class="nut-tabs" :class="[direction]" ref="container" id="container">
+    <view
+      class="nut-tabs__titles"
+      :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"
+          :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>
+      </template>
+    </view>
+    <view class="nut-tabs__content" :style="contentStyle">
+      <slot name="default"></slot>
+    </view>
+  </view>
+</template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { component } from './common';

src/packages/__VUE/tabs/index.vue

@@ -1,4 +1,62 @@
-<template src="./template.html"></template>
+<template>
+  <view class="nut-tabs" :class="[direction]" ref="container" id="container">
+    <template v-if="sticky">
+      <nut-sticky :top="top" :container="container" @scroll="onStickyScroll">
+        <view
+          class="nut-tabs__titles"
+          :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"
+              :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>
+          </template>
+        </view>
+      </nut-sticky>
+    </template>
+    <template v-else>
+      <view
+        class="nut-tabs__titles"
+        :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"
+            :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>
+        </template>
+      </view>
+    </template>
+    <view class="nut-tabs__content" :style="contentStyle">
+      <slot name="default"></slot>
+    </view>
+  </view>
+</template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { component } from './common';

src/packages/__VUE/tabs/template.html

@@ -1,43 +0,0 @@
-<view class="nut-tabs" :class="[direction]" ref="container" id="container">
-  <template v-if="sticky">
-    <nut-sticky :top="top" :container="container" @scroll="onStickyScroll">
-      <view class="nut-tabs__titles" :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" :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>
-        </template>
-      </view>
-    </nut-sticky>
-  </template>
-  <template v-else>
-    <view class="nut-tabs__titles" :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" :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>
-      </template>
-    </view>
-  </template>
-  <view class="nut-tabs__content" :style="contentStyle">
-    <slot name="default"></slot>
-  </view>
-</view>

src/sites/mobile-taro/vue/src/nav/pages/tabs/index.vue

@@ -120,7 +120,6 @@ export default {
     });
     setTimeout(() => {
       state.list3.push(999);
-      state.tab3value = '2';
     }, 3000);
 
     return { state };