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

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

html

	
	
		菜单一
		菜单二
		菜单三
	 
	





	内容一
	内容二  
	内容三

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%;}

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

最终效果

 

第二种，只点击

	菜单一
	菜单二







	内容2


	内容3
 

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