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

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

 

 

 

 

 

 

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

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

 

2.在页面上渲染列表

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

 

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

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

 

4.详细代码如下

4.1 course.wxml 文件

<!-- 主体内容 -->
<view class="container">
    <!-- 菜单 -->
    <view class="flexs menu">
        <view class="active_t" wx:for="{{menuList}}" wx:key="index" bindtap="selectCurr" data-id="{{item.id}}">
            <view class="menu-item {{index == hasindex ? 'select-item' : 'dis-select-item'}}">{{item.name}}</view>
            <view class="menu-bar {{index == hasindex ? 'menu-bar-show' : 'menu-bar-hide'}}"></view>
        </view>
    </view>
</view>

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;
}