微信小程序 选项卡(数据双层循环)

第一种：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格式、样式都与第一种一样