img.gif

自定义组件教程
参考教程1
参考教程2

组件之间的关联

tabs 内部包含tab,relations 是parent 和child 的关系

代码目录结构

使用微信开发者工具--新建Page和Component(Tabs和tab)生成文件

目录如下

• component
  • Tabs
    • tab
      • tab.js
      • tab.json
      • tab.wxml
      • tab.wxss
    • tabs.js
    • tabs.json
    • tabs.wxml
    • tabs.wxss
• page
  • index.js
  • index.json
  • index.wxml
  • index.wxss

页面代码

active控制进入页面时显示的内容，title 是切换的标题

index.wxml

<view>
  <tabs>
    <tab title='选项1'>
        <view>111</view>
    </tab>
    <tab title='选项2' active>
        <view>222</view>
    </tab>
    <tab title='选项3'>
        <view> 333</view>
    </tab>
  </tabs>
</view>

index.json

定义当前页面使用的组件

{
  "navigationBarTitleText": "Tab",
  "usingComponents": {
    "tabs": "/component/Tabs/tabs",
    "tab": "/component/Tabs/tab/tab"
  }
}

组件代码

tabs.wxml

<view class="weui-tab">
  <view class="weui-navbar">
    <block wx:for="{{listTitles}}" wx:for-index="idx" wx:for-item="item" wx:key="*this">
      <view data-idx="{{idx}}" bindtap="action" class="weui-navbar__item {{activeIndex == idx ? 'weui-bar__item_on' : ''}}">
        <view class="weui-navbar__title">{{item}}</view>
      </view>
    </block>
  </view>
  <view class="weui-tab__panel">
      <slot></slot>
  </view>
</view>

tabs.wxss

引用weui的样式，注意修改自己的路径

@import "/component/libs/weui/weui.wxss";

.weapp-tab .weui-navbar__item{
  background: #f5f5f5;
  color: #32b16c;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  text-align: center;
  display: inline-block;
}

.weapp-tab .weui-bar__item_on{
  color: #fff;
  background: #32b16c;
}


.weui-navbar__item{
  position: relative;
  top: 1px;
}

.weui-bar__item_on{
  border-bottom: 1px solid #1aad19;
}

tabs.json

{
  "component": true,
  "usingComponents": {}
}

tabs.js

Component({
  options:{
    multipleSlots: true
  },
  relations:{
    './tab/tab':{
      type:'child',
      linked: function(target) {
        // console.log(target)
        this.data.listTitles.push(target.data.title);
        this.setData({
          listTitles: this.data.listTitles
        })
      }
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    listTitles:[],
    activeIndex: 0
  },
  ready:function(){
    var nodes = this.getRelationNodes('./tab/tab');
    let noActive = nodes.every(function(v){
      return v.getActive() == false;
    })
    if(noActive){
      nodes[0]._active(true);
      return;
    }
    nodes.map((v,i)=>{
      if(nodes[i].getActive()){
        nodes[i]._active(true);
        this.setData({activeIndex: i})
      }
    })
  },
  /**
   * 组件的方法列表
   */
  methods: {
    action(event) {
      let { activeIndex} = this.data;
      let idx = event.currentTarget.dataset.idx;

      if (activeIndex == idx) return;
      activeIndex = idx;
      let nodes = this.getRelationNodes('./tab/tab');
      nodes.map((v,i)=>{
        nodes[i]._active(activeIndex == i)
      })
      activeIndex = idx;

      this.setData({
        activeIndex: activeIndex
      });

      this.triggerEvent('change', { activeIndex });
    }
  }
})

tab.wxml

<view  hidden='{{!visiable}}'>
  <slot></slot>
</view>

tab.json

{
  "component": true,
  "usingComponents": {}
}

tab.js

// component/Tabs/tab/tab.js
Component({

  relations:{
    '../tabs':{
      type: 'parent',
    }
  },

  properties: {
    title: String,
    active :{
      type: Boolean,
      value:false
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    visiable: false,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    _active:function(arg){
      if(arg){
        this.setData({
          visiable:true
        })
      } else {
        this.setData({
          visiable:false
        })
      }
    },
    getActive:function(){
      return this.properties.active;
    }
  }
})