微信小程序实现选项卡

<!---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;
    width: 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)
  }
})

　　

 

 实现效果。