=====》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)

  }