封装tab组件

=====》tab切换组件的封装
wx:key="{{index}} 绑定标识  它的下标是从0开始的
{{currentIndex==index ? "active" : ""}}' bindtap='clickitem'   三目运算 为真 添加一个类active
data-index="{{index}}" 动态传递参数

<text>{{item}}</text>  目的是可以控制下划线
.active text{
  padding: 20rpx 20rpx;
  border-bottom: 6rpx solid pink;
}

let index = event.currentTarget.dataset.index;//拿到点击的下标

bind:itemclick="getleibuClick" 自定义事件

输出内部的数据
  getleibuClick(event){
    console.log(event)
  }

<view class='tab-contrao'>
<block wx:for="{{titles}}" wx:key="{{index}}">
   <view class='tab-item {{currentIndex==index ? "active" : ""}}' bindtap='clickitem' data-index="{{index}}">
      <text>{{item}}</text>
   </view>
</block>
</view>

.tab-contrao{
  display: flex;
  height: 88rpx;
  line-height: 88rpx;
  background: orange;
  margin-top:20rpx;

}

.tab-item{
  flex: 1;
  text-align: center;
}

.active{
  color: red;
}

.active text{
  padding: 20rpx 20rpx;
  border-bottom: 6rpx solid pink;
}

properties: {
    titles:{
      type:Array,
      value:[],
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    currentIndex:0,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    clickitem(event){
      let index = event.currentTarget.dataset.index;//拿到点击的下标
      this.setData({
        currentIndex: index// event.currentTarget.dataset.index 是传递过来index
      })

      // 通知外部  内部发生了什么事情
      // itemclick 事件名
      // index  点击的序号
      //  title: this.properties.titles[index]  内容
      this.triggerEvent("itemclick", { index: index, title: this.properties.titles[index] },{})
    },

  },

  <!-- tab -->
<aa  titles="{{['精品','优惠','美剧']}}" bind:itemclick="getleibuClick"/>

  getleibuClick(event){
    console.log(event)
  }