<view class="flexad">
  <view bindtap="btnbaobei" data-id="{{item.id}}" style="color:{{iads == item.id ? '#027AFF':'#000'}}"  wx:for="{{liste}}">{{item.text}}</view>
</view>
<view>
<view wx:if="{{iads==0}}">



</view>
<view wx:if="{{iads==1}}">2</view>
<view wx:if="{{iads==2}}">3</view>
<view wx:if="{{iads==3}}">4</view>
</view>

/* packageA/mybroker/mybroker.wxss */
.flexad{
  display: flex;
  justify-content: space-around;align-items: center;
  font-size: 28rpx;
  font-weight: 700;
}

// packageA/mybroker/mybroker.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    iads:0,
    liste: [{
        text: "待审核",
        id: 0,
      }, {
        text: "待面试",
        id: 1,
      }, {
        text: "已入职",
        id: 2,
      }, {
        text: "无效报备",
        id: 3,
      },
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  btnbaobei(e){
    console.log(e.currentTarget.dataset.id);
    this.setData({
      iads:e.currentTarget.dataset.id
    })
  }
})

第一种：swiper选项卡，可点击可滑动（swiper自带了一个150的高度，高度不好控制）

html

<!-- 选项卡 -->
<view class='topTabSwiper'>

<!-- 从接口获取数据写法 index是小程序自带的可以直接用
		<view class="tabbox" wx:for="{{detail_data.copywriting}}" wx:key="index">
			<text  class="tab {{currentData == index ? 'tabBorer' : ''}}"  data-current = "{{index}}" bindtap='checkCurrent'>{{item.title}}</text>
		</view> 
-->
	
	<view class="tabbox">
		<text class='tab  {{currentData == 0 ? "tabBorer" : ""}}'  data-current = "0" bindtap='checkCurrent'>菜单一</text>
		<text class='tab  {{currentData == 1 ? "tabBorer" : ""}}'  data-current = "1" bindtap='checkCurrent'>菜单二</text>
		<text class='tab  {{currentData == 2 ? "tabBorer" : ""}}'  data-current = "2" bindtap='checkCurrent'>菜单三</text>
	</view> 
	

</view>

<swiper   current="{{currentData}}" class='swiper3'  duration="300" bindchange="bindchange">
<!--从接口获取数据写法
	<swiper-item wx:for="{{detail_data.copywriting}}" wx:key="index">

		<view class='swiper_con'>
			<view class="adrss_box" wx:for="{{item.detailmessage}}" wx:for-item="cell" wx:key="index">
				{{cell.title.titlestr}}
			</view>
		</view>
	</swiper-item> 
-->
	<swiper-item><view class='swiper_con'>内容一</view></swiper-item>
	<swiper-item><view class='swiper_con'>内容二</view></swiper-item>  
	<swiper-item><view class='swiper_con'>内容三</view></swiper-item>



</swiper>
<!-- 选项卡 End-->

js

data:{
  //选项卡
    currentData: 0,
}

/**
 * tab切换
 */
//swiper切换时会调用
//获取当前滑块的index
bindchange: function (e) {

    var index = e.detail.current;
    // console.log("滑动"+index)

    this.setData({
        currentData: e.detail.current,

    })
},
//点击切换，滑块index赋值
checkCurrent: function (e) {
    var index = e.target.dataset.current;
    if (this.data.currentData === e.target.dataset.current) {
        return false;
    } else {
        this.setData({
            currentData: e.target.dataset.current,

        })
    }
    // console.log("点击" + index)
},

css 这部分不重要 

.title {width:100%;height:88rpx;background: white;display:flex;align-items:center;justify-content: space-around;}
.topTabSwiper{height:50rpx;font-size:26rpx;margin-bottom:20rpx;padding:0 40rpx;}
.topTabSwiper:after{content: ""; clear: both;display: block;}
.tabbox{float:left; width:20%;text-align:center; }
.tab{display:block;height:50rpx;line-height:50rpx;width:80%;border-radius:25rpx;color:#292b33;margin:0 auto;}
.tabBorer {color:#fff;background: -webkit-linear-gradient(left,#ffc20d ,#ffad00); 
background: -o-linear-gradient(left, #ffc20d ,#ffad00);
background: -moz-linear-gradient(left, #ffc20d ,#ffad00); 
background: linear-gradient(to right, #ffc20d ,#ffad00);}
.topTabSwiper .swiper{width:100%;}
.swiper_con{width:100%;height: 100%;}

我的接口数据格式（供参考），循环里套循环取出数据

最终效果

第二种，只点击

<view class="swiper-tab">
<!-- 从接口取数据
	<view  class="tabbox" wx:for="{{detail_data.copywriting}}" wx:key="index">
		<text class="swiper-tab-item {{currentTab== index ?'active':''}}" data-current="{{index}}" bindtap="clickTab">{{item.title}}</text>
	</view>
-->

	<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">菜单一</view>
	<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">菜单二</view>


</view>

<!--从接口取数据
<view wx:for="{{detail_data.copywriting}}" wx:key="index" class = "{{currentTab == index ? 'show':'hidden'}}" >
	<scroll-view>

		<view class="adrss_box" wx:for="{{item.detailmessage}}" wx:for-item="cell" wx:key="index">
		{{cell.title.titlestr}}
		</view>

	</scroll-view>
</view>
-->

<view class = "{{currentTab == 0 ? 'show':'hidden'}}" >
	<scroll-view><text>内容2</text></scroll-view>
</view>
<view class = "{{currentTab == 1 ? 'show':'hidden'}}">
	<scroll-view><text>内容3</text></scroll-view>
</view> 

js

dada:{
currentTab:0,
}

//点击切换
clickTab: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
        return false;
    } else {
        that.setData({
            currentTab: e.target.dataset.current,
        })
    }
},

json格式、样式都与第一种一样

在开发微信小程序的时候，会遇到选项卡切换，这里有一个小例子，可以做为参考，代码如下

结构部分: