微信小程序列表渲染点击增添或移除类以改变

需求是这样的：

要做成这样的效果：当点击上面的导航栏时颜色会变成橙色，下面多出一条下划线，不点时默认是第一个。当然下面也会随之发生变化（需要从后台获取数据后渲染，这里默认暂无订单）。

wxml 代码如下：

 
  
    {{item.name}} 
  

 

  
  暂无订单

wx:for 是循环。循环渲染{{datas}} 里的数据。 data-key ="{{index}}",每条数据里的data-key都不一样，分别为 0,1,2,3。

后面的 e.currentTarget.dataset.key  就是分别获得每次点击的data-key。

js:

data: {
    datas:[
      {name:"全部",state:"1"}, //数据渲染，将第一个设置为默认的active。
      { name: "代付款",state:"0" },
      { name: "可使用", state: "0" },
      { name: "退款/售后", state: "0"}
    ]
  },
  checkCloumn:function(e){  //点击事件
    for(var i =0;i

wxss:

page{
  background: #f8f8f8;
}
.header{
  width: 100%;
  height: 100rpx;
  overflow: hidden;
  background: #fff;
  box-shadow: #ddd 2px 4px 20px;
}
.header .headColumn{
  width: 25%;
  height: 100rpx;
  line-height: 100rpx;
  float: left;
  font-size: 28rpx;
  color: #333;
  text-align: center;
}
.header .headColumn text{
  padding: 30rpx 0;
}
.header .active text{
  color: #ff6336;
  border-bottom:solid #ff6336 1px;
}
.orderBody{
  width: 200rpx;
  height: 200rpx;
  margin: 200rpx auto;
  overflow: hidden;
}
.orderBody image{
  width: 200rpx;
  height: 150rpx;
}
.orderBody .noOrder{
  text-align: center;
  color: #666;
  font-size: 28rpx;
  /* margin-top: 20rpx; */
}