微信小程序 - 点击导航栏标签切换变色（导航栏当前hover样式）

效果图

实现

这个功能，借助一个切换标识，当与各标签项 index 对应时切换 css。

WXML：

<text
class="{{ index == current ? 'active' : '' }}"
wx:for="{{ nav }}"
wx:key="index"
data-index="{{ index }}"
bindtap="go"
>{{ nav[index] }}</text>

JS：

Page({

  /*
  * 数据
  */
  data: {
    current: '0',//切换标识
    nav: [//导航栏数据
      '首页',
      '服务中心',
      '要闻咨询',
      '关于我们'
    ]
  },

  /*
  * 事件处理
  */
  go: function(e) {

    // 获取索引
    let index = e.currentTarget.dataset.index

    // 切换颜色 / 更新数据
    this.setData({
      current: index
    })
  }

})

WXSS

/* 简单来点样式 */
text {
  padding-right: 30rpx;
}
/* END */

/* 激活样式 */
.active {
  color: red;
}
/* END */