首先新建一个自定义组件，组件名随意，这里我设置的组件名为My-tab,新建完组件之后，第一件事就是声明好导航栏可能需要用到的样式（代码如下）
/* Accessories/My_tab/My_tab.wxss */.tab-contrl{display: flex;/*弹性布局*/height: 88rpx;line-height: 88rpx;}.tab-item{flex: 1; text-align: center}.active{color: red;}.active text{padding: 20rpx 16rpx;border-bottom: 6rpx solid red}
声明完样式之后，先不着急使用样式制作导航栏UI，先声明好导航栏可能使用的点击事件或数据（代码如下）
// Accessories/My_tab/My_tab.jsComponent({/*** 组件的属性列表*/properties: {titles:{//新建名为titles的变量，变量类型为Array，默认值为空type:Array,value:[]}},/*** 组件的初始数据*/data: {currentIndex: 0},/*** 组件的方法列表*/methods: {onItemClick(event){const index= event.currentTarget.dataset.index;//新建index变量，用来装载被点击组件的index值this.setData({currentIndex: index//将index值传给变量currentIndex})this.triggerEvent('itemclick', {index, title: this.properties.titles[index] }, {})//设置触发事件类型为itemclick，并使用detail对象装载被点击的index值，与其对应的标题，最后设置触发事件选项为空}}})
声明好的点击事件内部逻辑大致为，当组件被点击后，会接收被点击组件对应的index值，然后将接收好的index值传给js文件中新建的currentIndex变量，这个变量以后先不用，之后能在制作导航栏UI的时候能用到，最后将接收好的index值与index对应的标题，通过triggerEvent传给detail对象，然后利用detail对象的数据可在父组件使用的特性，将index传给父组件。
声明完点击事件之后，就可以开始着手导航栏UI了，这里利用之前在点击事件获取到index值得变量currentIndex，写一个三元运算判断currentIndex，当currentIndex不为空则让当前被点击的组件使用样式active，也就是字体变红出现下划线的样式，然后在外层套个block，利用wx：for遍历从父组件传来的标题数组，最后在最外层用view包裹，并使用之前声明好的tab-contrl样式（代码如下）
<view class="tab-contrl"><block wx:for="{{titles}}" wx:key="{{index}}"><view class='tab-item {{currentIndex==index?"active":""}}'bindtap='onItemClick'data-index="{{index}}"><text>{{item}}</text></view></block></view>
这样组件完成了，只剩下引用了，老规矩，先在父组件的json文件声明（代码如下）
"My_tab":"/Accessories/My_tab/My_tab"
声明之后，直接在父组件调用，但因为这个组件需要父组件传来标题组文本才能生成，所以在调用此组件的时候记得输入标题组文本，然后为了能在Console上看到该子组件被点击后打印的event，这里还添加了绑定了一个名为handleTabClick的点击事件（代码如下）
<!--Pages/Grammer/Grammer.wxml--><My_tab titles="{{['衣服','裤子','鞋子']}}"bind:itemclick="handleTabClick"/>
点击事件handleTabClick的代码如下
// Pages/Grammer/Grammer.jshandleTabClick(event){console.log(event)},
这样在父组件点击子组件之后，在Console上会打印event，并且其中detail对象的值是在子组件JS文件中赋予的（效果图如下）
然后组件总体效果图如下
