修复分段器动态赋值不生效的bug

tuniao-ui/components/tn-subsection/tn-subsection.vue

@@ -1,31 +1,19 @@
 <template>
-  <view
+	<view class="tn-subsection-class tn-subsection" :class="[subsectionBackgroundColorClass]"
-    class="tn-subsection-class tn-subsection"
+		:style="[subsectionStyle]">
-    :class="[subsectionBackgroundColorClass]"
-    :style="[subsectionStyle]"
-  >
 		<!-- 滑块 -->
 		<block v-for="(item, index) in listInfo" :key="index">
-      <view
+			<view class="tn-subsection__item tn-text-ellipsis" :class="[
-        class="tn-subsection__item tn-text-ellipsis"
-        :class="[
           'section-item-' + index,
           noBorderRight(index)
-        ]"
+        ]" :style="[itemStyle(index)]" @tap="click(index)">
-        :style="[itemStyle(index)]"
-        @tap="click(index)"
-      >
 				<view class="tn-subsection__item--text tn-text-ellipsis" :style="[textStyle(index)]">
 					{{ item.name }}
 				</view>
 			</view>
 		</block>
 		<!-- 背景 -->
-    <view
+		<view class="tn-subsection__bg" :class="[itemBarClass]" :style="[itemBarStyle]"></view>
-      class="tn-subsection__bg"
-      :class="[itemBarClass]"
-      :style="[itemBarStyle]"
-    ></view>
 	</view>
 </template>
 
@@ -49,7 +37,7 @@
 			// tab的数据
 			list: {
 				type: Array,
-        default() {
+				default () {
 					return []
 				}
 			},
@@ -123,6 +111,24 @@
 			}
 		},
 		watch: {
+			list: {
+				handler(val) {
+					this.listInfo = val.map((item, index) => {
+						if (typeof item !== 'object') {
+							let obj = {
+								width: 0,
+								name: item
+							}
+							return obj
+						} else {
+							item.width = 0
+							return obj
+						}
+					})
+				},
+				immediate: true,
+				deep: true
+			},
 			current: {
 				handler(val) {
 					this.currentIndex = val
@@ -337,7 +343,6 @@
 </script>
 
 <style lang="scss" scoped>
-  
 	.tn-subsection {
 		/* #ifndef APP-PLUS */
 		display: flex;
@@ -406,5 +411,4 @@
 			}
 		}
 	}
-  
 </style>