fix:修复动态设置数据时数据更新问题 (#325)

Author: 二一

dist/segment-item/index.js

@@ -9,8 +9,8 @@ Component({
   relations: {
     '../segment/index': {
       type: 'parent',
-      linked() {},
-      unlinked() {}
+      linked() { },
+      unlinked() { }
     },
   },
 
@@ -24,7 +24,12 @@ Component({
       value: 'top'
     },
     dotBadge: Boolean,
-    badgeCount: Number,
+    badgeCount: {
+      type: Number,
+      observe: function (newVal, oldVal) {
+        console.log(newVal, oldVal)
+      }
+    },
     badgeMaxCount: {
       type: Number,
       value: 99
@@ -34,7 +39,11 @@ Component({
       value: 'overflow'
     },
   },
-
+  observers: {
+    '**': function (filed) {
+      this.updateData(filed)
+    }
+  },
   /**
    * 组件的初始数据
    */
@@ -44,6 +53,21 @@ Component({
    * 组件的方法列表
    */
   methods: {
+    updateData(filed) {
+      let parent = this.getRelationNodes('../segment/index')[0];
+      if (!parent) return;
+      const tabList = parent.data.tabList;
+      if (!(tabList && tabList.length > 0)) return;
+      const index = tabList.findIndex(tab => tab.key === this.data.key)
+      tabList[index] = filed;
+      parent.setData({
+        tabList: tabList
+      }, () => {
+        if (parent.data.scrollable) {
+          parent.queryMultipleNodes();
+        }
+      })
 
+    },
   }
 })

dist/tabpanel/index.js

@@ -25,6 +25,7 @@ Component({
       value:'top'
     },
   },
+  
 
   /**
    * 组件的初始数据
@@ -33,4 +34,8 @@ Component({
     isCurrent: false,
     index:0,
   },
+
+  methods:{
+    
+  }
 })

examples/dist/segment-item/index.js

@@ -9,8 +9,8 @@ Component({
   relations: {
     '../segment/index': {
       type: 'parent',
-      linked() {},
-      unlinked() {}
+      linked() { },
+      unlinked() { }
     },
   },
 
@@ -24,7 +24,12 @@ Component({
       value: 'top'
     },
     dotBadge: Boolean,
-    badgeCount: Number,
+    badgeCount: {
+      type: Number,
+      observe: function (newVal, oldVal) {
+        console.log(newVal, oldVal)
+      }
+    },
     badgeMaxCount: {
       type: Number,
       value: 99
@@ -34,7 +39,11 @@ Component({
       value: 'overflow'
     },
   },
-
+  observers: {
+    '**': function (filed) {
+      this.updateData(filed)
+    }
+  },
   /**
    * 组件的初始数据
    */
@@ -44,6 +53,21 @@ Component({
    * 组件的方法列表
    */
   methods: {
+    updateData(filed) {
+      let parent = this.getRelationNodes('../segment/index')[0];
+      if (!parent) return;
+      const tabList = parent.data.tabList;
+      if (!(tabList && tabList.length > 0)) return;
+      const index = tabList.findIndex(tab => tab.key === this.data.key)
+      tabList[index] = filed;
+      parent.setData({
+        tabList: tabList
+      }, () => {
+        if (parent.data.scrollable) {
+          parent.queryMultipleNodes();
+        }
+      })
 
+    },
   }
 })

examples/dist/tabpanel/index.js

@@ -25,6 +25,7 @@ Component({
       value:'top'
     },
   },
+  
 
   /**
    * 组件的初始数据
@@ -33,4 +34,8 @@ Component({
     isCurrent: false,
     index:0,
   },
+
+  methods:{
+    
+  }
 })

examples/pages/components/nav/pages/segment/index.js

@@ -59,7 +59,8 @@ Page({
         defaultImage: '/pages/components/nav/images/tab-icon/bathroom.png',
       }
     }
-    ]
+    ],
+    brageCount:5
   },
 
   changeTabs(e) {
@@ -101,7 +102,6 @@ Page({
    * Lifecycle function--Called when page show
    */
   onShow: function () {
-
   },
 
   /**

examples/pages/components/nav/pages/segment/index.wxml

@@ -35,6 +35,10 @@
         <l-segment-item tab="卫生清洁" key="eight">
           <view class="tab-content">卫生清洁</view>
         </l-segment-item>
+        <l-segment-item tab="客厅" key="123" />
+        <l-segment-item tab="卧室" key="456" />
+        <l-segment-item tab="厨房" key="789" />
+        <l-segment-item tab="浴室" key="1011" />
       </l-segment>
     </content-card>
 
@@ -73,7 +77,7 @@
     <content-card l-content="content" name="徽标选项卡">
       <l-segment active-key="one" bind:linchange="changeTabs">
         <l-segment-item tab="客厅" key="one" dot-badge="{{true}}"/>
-        <l-segment-item tab="卧室" key="two" badge-count="97"/>
+        <l-segment-item tab="卧室" key="two" badge-count="{{brageCount}}"/>
         <l-segment-item tab="厨房" key="three" badge-count="900" l-class-badge="badge-view"/>
         <l-segment-item tab="浴室" key="four" />
       </l-segment>

src/segment-item/index.js

@@ -9,8 +9,8 @@ Component({
   relations: {
     '../segment/index': {
       type: 'parent',
-      linked() {},
-      unlinked() {}
+      linked() { },
+      unlinked() { }
     },
   },
 
@@ -24,7 +24,12 @@ Component({
       value: 'top'
     },
     dotBadge: Boolean,
-    badgeCount: Number,
+    badgeCount: {
+      type: Number,
+      observe: function (newVal, oldVal) {
+        console.log(newVal, oldVal)
+      }
+    },
     badgeMaxCount: {
       type: Number,
       value: 99
@@ -34,7 +39,11 @@ Component({
       value: 'overflow'
     },
   },
-
+  observers: {
+    '**': function (filed) {
+      this.updateData(filed)
+    }
+  },
   /**
    * 组件的初始数据
    */
@@ -44,6 +53,21 @@ Component({
    * 组件的方法列表
    */
   methods: {
+    updateData(filed) {
+      let parent = this.getRelationNodes('../segment/index')[0];
+      if (!parent) return;
+      const tabList = parent.data.tabList;
+      if (!(tabList && tabList.length > 0)) return;
+      const index = tabList.findIndex(tab => tab.key === this.data.key)
+      tabList[index] = filed;
+      parent.setData({
+        tabList: tabList
+      }, () => {
+        if (parent.data.scrollable) {
+          parent.queryMultipleNodes();
+        }
+      })
 
+    },
   }
 })

src/tabpanel/index.js

@@ -25,6 +25,7 @@ Component({
       value:'top'
     },
   },
+  
 
   /**
    * 组件的初始数据
@@ -33,4 +34,8 @@ Component({
     isCurrent: false,
     index:0,
   },
+
+  methods:{
+    
+  }
 })