微信小程序之tab切换

html

<view class='detail-bottom-box'>

<!-- tab标签栏开始 -->

<view class='tabs-box'>

<block wx:for="{{['我的签到','我的查看','我的申请']}}" wx:key="id">

<view class="tabs-item.{{currentTabsIndex==index?'selected':''}}" bindtap='onTabsItemTab' data-index='{{index}}'>

{{item}}

</view>

</block>

</view>

<!-- tab标签栏结束 -->

<!-- 具体内容开始 -->

<view class='product-detail-box'>

<!-- 我的签到开始 -->

<view hidden='{{currentTabsIndex!=0}}'></view>

<!-- 我的签到结束 -->

<!-- 我的查看开始 -->

<view class='scan-box' hidden='{{currentTabsIndex!=1}}'></view>

<!-- 我的查看结束 -->

<!-- 我的申请开始 -->

<view class='scan-box' hidden='{{currentTabsIndex!=2}}'></view>

<!-- 我的申请结束 -->

</view>

<!-- 具体内容结束 -->

</view>

csss

.product-detail-box{

margin-top: 10rpx;

border:  1px blue solid;

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-between;

}

.tabs-box{

display: flex;

flex-direction: row;

align-items: center;

justify-content: space-between;

}

/* 选项激活 */

.tabs-item.selected {

color:rgba(171,149,109,.8);

border-bottom:2px solid rgba(171,149,109,.8);

}

/* 选项未激活 */

.tabs-item {

width:33.3%;

color:#C7C7CB;

font-size:40rpx;

display:flex;

align-items:center;

justify-content:center;

border-bottom:1rpx solid #D0D0D7;

font-family: MicroSoft YaHei;

}

js

data: {

currentTabsIndex:0,

},

// 底部tab切换函数

onTabsItemTab: function (event) {

var index = event.currentTarget.dataset.index;

this.setData({

currentTabsIndex: index

});

},