15:自定义组件做一个功能

test.js:

 //流行 新款 精选 event中把这是三个的内容和下标传过来
  handletapclick:function(event){
    console.log("下标是："+event.detail.indexn+"内容是："+event.detail.titles);
  },

test.json:

"usingComponents": {
    "tab-control":"/pages/component/tabcontrol/tabcontrol"
  },

test.wxml:

itemclick为tabcontrol.js中的 bind: 后面是随便起的

<!--tab-contol的练习 itemclick为tabcontrol.js中的-->
<tab-control titles="{{['流行','新款','精选']}}" bind:itemclick='handletapclick'></tab-control>

创建tabcontrol

tabcontrol.js:

Component({
  //组件的属性列表
  properties:{
    titles:{
       type:Array,
       value:[]
    }
  },
  data:{
    currentIndex:0
  },
  methods:{
    handletabcontrolclick(event){
      //取出index
      const indexn = event.currentTarget.dataset.index;
      //修改currentIndex
      this.setData({
        currentIndex:indexn
      })
      //向test.wxml传递数据
      this.triggerEvent('itemclick',{indexn,titles:this.properties.titles[indexn]})
    }
  }
})

tabcontrol.json:

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

tabcontrol.wxml:

active 为 tabcontrol.wxss 中属性

<!--pages/component/tabcontrol/tabcontrol.wxml-->
<view class="tab-control">
  <block wx:for="{{titles}}" wx:key="{{index}}">
    <!--active用于点击哪个哪个变颜色-->
    <view class="tab-item {{currentIndex == index ? 'active':''}}"
      bindtap="handletabcontrolclick"
      data-index="{{index}}"
    ><text>{{item}}</text></view>
  </block>
</view>

tabcontrol.wxss:

/* pages/component/tabcontrol/tabcontrol.wxss */
.tab-control{
  display: flex;
  height: 88rpx;
  line-height: 88rpx;
  background:orange;
}

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

/* 这两个为了把下划线长度与汉字一样长 .active 和 .active text*/
.active{
  color:red;
}
.active text{
  padding: 20rpx 10rpx;
  border-bottom: 3rpx solid blue;
}

效果：