小程序实现导航栏效果————（2019.12.23学习笔记）

首先新建一个自定义组件，组件名随意，这里我设置的组件名为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.js
Component({
  /**
   * 组件的属性列表
   */
  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.js
 handleTabClick(event)
   {
     console.log(event)
   },

这样在父组件点击子组件之后，在Console上会打印event，并且其中detail对象的值是在子组件JS文件中赋予的（效果图如下）

然后组件总体效果图如下