微信小程序的动态样式绑定，实现顶部导航菜单

由于业务需要，在小程序中需要实现类似选项卡的顶部导航菜单，效果图如下所示：

1.在js文件的data里面构造数据

将需要的菜单放入数组对象中，方便以后扩展，增加了菜单的灵活性，设置变量记录当前所选的菜单的id，由于应用了数组的下标做判断，菜单的id需要从0开始

2.在页面上渲染列表

首先循环列表绑定点击事件，将菜单id作为参数传入，根据当前的下标和当前所选的菜单id，做三元运算判断，显示不同的样式

3.在js文件中定义点击事件

接收页面传过来的当前所选择的菜单id，赋值给data里面的hasindex

4.详细代码如下

4.1 course.wxml 文件

    
    
        for="{{menuList}}" wx:key="index" bindtap="selectCurr" data-id="{{item.id}}">
            {{item.name}}
            
        
    

4.2 course.js 文件

Page({
  //页面的初始数据
  data: {
    hasindex:0, //当前选择菜单的id
    menuList:[  //菜单列表
      {id:0,name:'所有课程'},
      {id:1,name:'学习中'},
      {id:2,name:'未读课程'}
    ]
  },

  // 选择菜单
  selectCurr(e){
    this.setData({hasindex:e.currentTarget.dataset.id});
  },

})

4.3 course.wxss 文件

.container {
  padding: 50rpx;
  box-sizing: border-box;
} 
.flexs{
  display: flex;
  justify-content:space-between;
}

/* 顶部菜单 */
.menu{
  width: 90%;
  font-size: 28rpx;
  font-weight: bold;
}
.select-item{
  color:#00A8F5;
}
.dis-select-item{
  color: rgba(0, 0, 0, 0.5);
}
.menu-bar{
  width: 100%;
  height: 6rpx;
  margin-top:10rpx;
  background:#00A8F5;
}
.menu-bar-show{
  display: block;
}
.menu-bar-hide{
  display: none;
}