fix:tabs动态更新属性 (#359)

Author: 二一

dist/tabpanel/index.js

@@ -1,41 +1,63 @@
 // components/tab/index.js
 Component({
-  externalClasses: ['v-tab-active', 'tab-default'],
+  externalClasses: ["v-tab-active", "tab-default"],
   relations: {
-    '../tabs/index': {
-      type: 'parent'
+    "../tabs/index": {
+      type: "parent",
+      linked: function(target) {
+        !this.data.parent && this.setData({
+          parent: target
+        });
+        // 每次被插入到custom-ul时执行，target是custom-ul节点实例对象，触发在attached生命周期之后
+      }
     },
-    '../combined-tabs/index': {
-      type: 'parent'
+    "../combined-tabs/index": {
+      type: "parent",
+      linked: function(target) {
+        !this.data.parent && this.setData({
+          parent: target
+        });
+        // 每次被插入到custom-ul时执行，target是custom-ul节点实例对象，触发在attached生命周期之后
+      }
     }
   },
   /**
    * 组件的属性列表
    */
   properties: {
     tab: String,
-    subTab:String,
-    subKey:String,
+    subTab: String,
+    subKey: String,
     key: String,
-    icon:String,
-    iconStyle:String,
-    image:Object,
-    picPlacement:{
-      type:String,
-      value:'top'
-    },
+    icon: String,
+    iconStyle: String,
+    image: Object,
+    picPlacement: {
+      type: String,
+      value: "top"
+    }
+  },
+
+  observers: {
+    "**": function(filed) {
+      this.updateData(filed);
+    }
   },
-  
 
   /**
    * 组件的初始数据
    */
   data: {
     isCurrent: false,
-    index:0,
+    index: 0,
+    parent: null
   },
 
-  methods:{
-    
+  methods: {
+    updateData(filed) {
+      let parent = this.data.parent;
+      if (!parent) return;
+      parent.initTabs()
+    }
   }
-})
+});

examples/dist/tabpanel/index.js

@@ -1,41 +1,63 @@
 // components/tab/index.js
 Component({
-  externalClasses: ['v-tab-active', 'tab-default'],
+  externalClasses: ["v-tab-active", "tab-default"],
   relations: {
-    '../tabs/index': {
-      type: 'parent'
+    "../tabs/index": {
+      type: "parent",
+      linked: function(target) {
+        !this.data.parent && this.setData({
+          parent: target
+        });
+        // 每次被插入到custom-ul时执行，target是custom-ul节点实例对象，触发在attached生命周期之后
+      }
     },
-    '../combined-tabs/index': {
-      type: 'parent'
+    "../combined-tabs/index": {
+      type: "parent",
+      linked: function(target) {
+        !this.data.parent && this.setData({
+          parent: target
+        });
+        // 每次被插入到custom-ul时执行，target是custom-ul节点实例对象，触发在attached生命周期之后
+      }
     }
   },
   /**
    * 组件的属性列表
    */
   properties: {
     tab: String,
-    subTab:String,
-    subKey:String,
+    subTab: String,
+    subKey: String,
     key: String,
-    icon:String,
-    iconStyle:String,
-    image:Object,
-    picPlacement:{
-      type:String,
-      value:'top'
-    },
+    icon: String,
+    iconStyle: String,
+    image: Object,
+    picPlacement: {
+      type: String,
+      value: "top"
+    }
+  },
+
+  observers: {
+    "**": function(filed) {
+      this.updateData(filed);
+    }
   },
-  
 
   /**
    * 组件的初始数据
    */
   data: {
     isCurrent: false,
-    index:0,
+    index: 0,
+    parent: null
   },
 
-  methods:{
-    
+  methods: {
+    updateData(filed) {
+      let parent = this.data.parent;
+      if (!parent) return;
+      parent.initTabs()
+    }
   }
-})
+});

examples/pages/components/nav/pages/combined-tabs/index.js

@@ -7,72 +7,6 @@ Page({
   data: {
     placement: 'left',
     placementArr: ['top', 'left', 'right', 'bottom'],
-    scrollAbleTabs: [{
-      tab: '精选',
-      key: 'treasure'
-    }, {
-      tab: '居家生活',
-      key: 'life'
-    }, {
-      tab: '美食厨房',
-      key: 'food'
-    }, {
-      tab: '服饰珠宝',
-      key: 'cloth'
-    }, {
-      tab: '美妆洗护',
-      key: 'cosmetics'
-    }],
-    iconTabs: [{
-      tab: '购物车',
-      key: 'cart',
-      icon: 'cart'
-    }, {
-      tab: '历史记录',
-      key: 'history',
-      icon: 'history'
-    }, {
-      tab: '我的',
-      key: 'mine',
-      icon: 'user'
-    }],
-    imagesTabs: [{
-      tab: '客厅',
-      key: 'dining',
-      image: {
-        activeImage: '/pages/nav/images/tab-icon/dining-active.png',
-        defaultImage: '/pages/nav/images/tab-icon/dining.png',
-        placement: 'top',
-      }
-    },
-    {
-      tab: '卧室',
-      key: 'badroom',
-      image: {
-        activeImage: '/pages/nav/images/tab-icon/badroom-active.png',
-        defaultImage: '/pages/nav/images/tab-icon/badroom.png',
-        placement: 'top',
-      }
-    }, {
-      tab: '厨房',
-      key: 'kichten',
-      image: {
-        activeImage: '/pages/nav/images/tab-icon/kichten-active.png',
-        defaultImage: '/pages/nav/images/tab-icon/kichten.png',
-        placement: 'top',
-      }
-    },
-    {
-      tab: '浴室',
-      key: 'bathroom',
-      image: {
-        activeImage: '/pages/nav/images/tab-icon/bathroom-active.png',
-        defaultImage: '/pages/nav/images/tab-icon/bathroom.png',
-        placement: 'top',
-        style: 'width:44rpx;height:44rpx;'
-      }
-    }
-    ],
     dubbleTabs: [{
       tab: '女装',
       key: 'women',
@@ -145,7 +79,6 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
   },
 
   /**

src/tabpanel/index.js

@@ -1,41 +1,63 @@
 // components/tab/index.js
 Component({
-  externalClasses: ['v-tab-active', 'tab-default'],
+  externalClasses: ["v-tab-active", "tab-default"],
   relations: {
-    '../tabs/index': {
-      type: 'parent'
+    "../tabs/index": {
+      type: "parent",
+      linked: function(target) {
+        !this.data.parent && this.setData({
+          parent: target
+        });
+        // 每次被插入到custom-ul时执行，target是custom-ul节点实例对象，触发在attached生命周期之后
+      }
     },
-    '../combined-tabs/index': {
-      type: 'parent'
+    "../combined-tabs/index": {
+      type: "parent",
+      linked: function(target) {
+        !this.data.parent && this.setData({
+          parent: target
+        });
+        // 每次被插入到custom-ul时执行，target是custom-ul节点实例对象，触发在attached生命周期之后
+      }
     }
   },
   /**
    * 组件的属性列表
    */
   properties: {
     tab: String,
-    subTab:String,
-    subKey:String,
+    subTab: String,
+    subKey: String,
     key: String,
-    icon:String,
-    iconStyle:String,
-    image:Object,
-    picPlacement:{
-      type:String,
-      value:'top'
-    },
+    icon: String,
+    iconStyle: String,
+    image: Object,
+    picPlacement: {
+      type: String,
+      value: "top"
+    }
+  },
+
+  observers: {
+    "**": function(filed) {
+      this.updateData(filed);
+    }
   },
-  
 
   /**
    * 组件的初始数据
    */
   data: {
     isCurrent: false,
-    index:0,
+    index: 0,
+    parent: null
   },
 
-  methods:{
-    
+  methods: {
+    updateData(filed) {
+      let parent = this.data.parent;
+      if (!parent) return;
+      parent.initTabs()
+    }
   }
-})
+});