微信小程序实现选项卡

<!---wxml--->
<!-- 选项卡 -->
<view class="box">
  <view wx:for="{{ info }}" wx:key="index" data-index="{{ index }}" bindtap="click" class="list {{ activeIndex ==index  ? 'active' :  '' }}" >
    {{ item }}
  </view>
</view>
<view>
  <!-- 显示内容 -->
   {{ info[activeIndex] }}
</view>

　　

/* wxss*/
.box{
    display: flex;
}

.box .list{
    border: 1px solid  #ccc;
     25%;
    padding: 5px  0px;
    text-align: center;
}

.active{
    color: red;
}

　　

//.....js....
Page({
  data: {
    info: ["首页", '已付款', "代付款", '订单完成'],
    activeIndex: 0,
  },
  click(e) {
    // console.log(e)
    let activeIndex = e.target.dataset.index;
    // this.data.activeIndex = activeIndex; // 1.activeIndex值可以发生变化，但是页面wxml没有重新渲染
    // 2.修改data中的数据，同时渲染更新页面
    this.setData({
      activeIndex: activeIndex
    })
    // console.log(this.data.activeIndex)
  }
})

　　

 实现效果。