小程序选项卡

index.wxml 页面的数据是渲染出来的   

data-index='{{index}}'是获取下标   bindtap：是点击事件 

class="tab {{index==din?'style':''}}"这是判断添加类名加背景颜色，是为了当前点击的高亮

<!--pages/mine/mine.wxml-->
<view>
  <view class="tab {{index==din?'style':''}}" bindtap="fnSwitch" data-index='{{index}}' wx:for="{{tab}}" wx:key="id">
    {{item.title}}</view>

    <view class="box" data-index='{{index}}' wx:if="{{index==din}}" wx:for="{{cont}}" wx:key="id">{{item.val}}</view>
  </view>

index.wxss

.tab {
  display: inline-block;
  margin: 0 20rpx;
  width: 200rpx;
  height: 80rpx;
  background-color: #ccc;
  text-align: center;
  line-height: 80rpx;
}
.style{
  background: pink;
}

.box {
  width: 100%;
  height: 300rpx;
  background: red;
}

index.js

// pages/mine/mine.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tab: [
        {id: '1',title: '按钮一'},
        {id: '2',title: '按钮二'},
        {id: '3',title: '按钮三'},
    ],
    cont:[
      {id:'11',val:'按钮一'},
      {id:'22',val:'按钮二'},
      {id:'33',val:'按钮三'},
    ],
    din: 0,
  },
  // 点击事件
  fnSwitch(e) {
    let that=this
// e.currentTarget.dataset.index获取下标
    let index = e.currentTarget.dataset.index
    that.setData({
      // 获取的下标存在data里面
     din:index
    })
  },
})