tabs.js 1.49 KB
// page/subPackage/pages/zeroSell/components/tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    currentKey: {
      type: Number,
      value: 0,
      observer(newVal) {
        this.setData({
          key: newVal
        });
        this._updateNav();
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    tabs: [],
    key: 0,
    nodes: []
  },

  externalClasses: ['tabs-class'],

  /**
   * 组件的方法列表
   */
  methods: {
    _getAllPane() {
      return this.getRelationNodes('./tabs-pane')
    },
    _onTap(e) {
      let index = e.target.dataset['index'];

      if (index === this.data.key) {
        return;
      }

      this.setData({
        key: index
      });

      this._updateNav();

      this.triggerEvent('change', index);
    },
    _updateNav() {
      this.data.nodes.forEach(item => {
        item.setData({
          show: false
        })
      });

      let tabs = this.data.nodes.map((item, index) => {
        let active = index === this.data.key;

        item.setData({
          show: active
        });

        return {
          name: item.data.name,
          index: index,
          active,
        };
      });

      this.setData({
        tabs
      });
    }
  },

  ready() {
    let nodes = this._getAllPane();

    this.setData({
      nodes,
      key: this.properties.currentKey
    });

    this._updateNav();
  },

  relations: {
    './tabs-pane': {
      type: 'child',
      linked(t) {
      }
    }
  }
})