小程序头部导航组件

js代码
在json里面配置"component": true,

// components/tab-header/tab-header.js
Component({
  externalClasses: ['tabs-head', 'tabs-title', 'tabs-active'],
  /**
   * 组件的属性列表
   */
  properties: {
    titleList: Array,
    title: {
      type: String,
      value: 'title'
    },
    cont: {
      type: String,
      value: '0'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
  },
  fun () {  
    console.log(this.data.cont);
  },
  /**
   * 组件的方法列表
   */
  methods: {
      // 子传父
      // this.triggerEvent('titleList', {name: 'dwp'})
    changeTab(data){
      let page = data.target.dataset.page
      this.setData({
        cont: page
      })
      this.triggerEvent('changeTabs', page)
    }
  },
  

})

css

.tab-head {
  padding-top: 20rpx;
  display: flex;
  justify-content: space-around;
  background-color: #ffffff;
  border-bottom: 2rpx solid #eeeeee;
}
.tab-head .tab-title {
  color: #525252;
  font-size: 30rpx;
  padding: 12rpx 0;
}
.tab-head .tab-active {
  color: #16BA63;
  border-bottom: 4rpx solid #16BA63;
}

html

<view>
    <view class="tab-head tabs-head">
      <view wx:for="{{ titleList }}" wx:key="{{item}}">
        <view class="tab-title tabs-title {{cont == index ? 'tab-active tabs-active': ''}}" bind:tap="changeTab" data-page="{{index}}">
        {{item[title]}}</view>
      </view>
    </view>
</view>