关于小程序和vue导航栏设置默认样式和动态样式切换

小程序导航栏实现动态样式切换

点击切换菜单栏时，在当前元素会添加样式

实现原理：动态添加class类，在页面中的标签上判断当前是否被选中状态（选中则添加）
css代码

.hover-class{
  background-color:yellow;
  border-left: 10rpx solid #9400D3;
}

js

data: {
    id:1,
    hoverClass:"hover-class",
  },
  check(e){
    let id=e.currentTarget.dataset.id;//从页面中传过来的id
    this.setData({
      hoverClass:"hover-class",
      id:id,
    })
  },

html代码

<navigator catchtap="check" data-id="{{item.cat_id}}" class="tital {{item.cat_id==id?hoverClass:''}}"></navigator>

data-id="{{item.cat_id}}当前选中的标签id并传到data中去
class="tital {{item.cat_id==id?hoverClass:’’}}"当前的id和data中的id是否相等，