微信小程序--选项卡

选项卡：

wxml

<view class="box">
  <view class="{{  index == activeIndex ? 'active' : ''}}" wx:for="{{ info }}" bindtap="change" data-index="{{ index }}">
    {{ item }}
  </view>
</view>
<view>
  {{ content[activeIndex] }}
</view>

js

Page({
  data:{
    info:["首页","代付款","已付款","订单完成"],
    content:["我是首页","我是代付款","我是已付款",'我是订单完成'],
    activeIndex:0
  },
  change(e){
    // console.log(e)
    let  activeIndex = e.currentTarget.dataset.index;
    this.setData({
      activeIndex
    })
  }
})

wxss

/* 选项卡 */
.box{
  display: flex;
  justify-content: space-around;
}

.box  .active{
  color: red;
}