微信小程序tab切换

直接上代码

wxml

<view class="nav-top">
  <i-row>
    <i-col span="6" wx:for="{{list}}" wx:key="index">
      <view class="nav-top-text" bindtap="toExpert" data-opt="{{item.id}}" data-current="{{index}}">
        <text class="text-middle {{index==currentTab?'active':''}}" >{{item.name}}</text>
      </view>
    </i-col>
  </i-row>
</view>

wxss

.active {
  color: #333333;
}

.nav-top {
  width: 96%;
  height: 50px;
  margin: 0 auto;
  border-bottom: 1px solid #eeeeee;
  background-color: white;
}

.nav-top-text {
  height: 50px;
  text-align: center;
  color: #888888;
  font-size: 13px;
}

.text-middle {
  line-height: 50px;
  vertical-align: middle;
}

js

page({
    data: {
         currentTab: 0,
        list: [{
          name: "权威评测",
          id: "evaluation"
        }, {
          name: "助力品牌",
            id: "brands"
        }, {
          name: "专家大咖",
            id: "expert"
        }, {
          name: "用户手册",
            id: "manual"
        },],
    },
    toExpert: function (e) {
        if (this.data.currentTab === e.currentTarget.dataset.current) {
          return false
        } else {
          this.setData({
            currentTab: e.currentTarget.dataset.current
            })
        }
    }
})