小程序实现导航栏效果————（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样式（代码如下）
{{item}}
这样组件完成了，只剩下引用了，老规矩，先在父组件的json文件声明（代码如下）
"My_tab":"/Accessories/My_tab/My_tab"
声明之后，直接在父组件调用，但因为这个组件需要父组件传来标题组文本才能生成，所以在调用此组件的时候记得输入标题组文本，然后为了能在Console上看到该子组件被点击后打印的event，这里还添加了绑定了一个名为handleTabClick的点击事件（代码如下）
【小程序实现导航栏效果————（2019.12.23学习笔记）】点击事件handleTabClick的代码如下
// Pages/Grammer/Grammer.js
handleTabClick(event)
{
console.log(event)
},
这样在父组件点击子组件之后，在Console上会打印event，并且其中detail对象的值是在子组件JS文件中赋予的（效果图如下）
文章图片
然后组件总体效果图如下
文章图片
推荐阅读
- 一个小故事，我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记
- 那件我们忽略的小事叫感恩
- 你有婚内虐待行为吗（）