1.wxml
<view class='tab flex flexSa alignC'>
<view class='tab_li {{currentData == 0 ? "tab_on" : ""}}' data-current="0" bindtap='changeTab'>
<view>1tab1</view>
<view class='tab_li_line'></view>
</view>
<view class='tab_line'></view>
<view class='tab_li {{currentData == 1 ? "tab_on" : ""}}' data-current="1" bindtap='changeTab'>
<view>2tab2</view>
<view class='tab_li_line'></view>
</view>
</view>
<view hidden='{{currentData != 0}}' class='t_c'>1tab1's baby</view>
<view hidden='{{currentData != 1}}' class='t_c'>2tab2's baby</view>
2.wxss
.tab {
width: 670rpx;
margin: 40rpx auto 0;
font-size: 44rpx;
color: #222;
text-align: center;
}
.flexSa {
-webkit-box-pack: justify;
justify-content: space-around;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
-ms-justify-content: space-around;
-o-justify-content: space-around;
}
.alignC {
align-items: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
}
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
display: box;
flex-wrap: wrap;
}
.tab_on {
color: #ff8a00;
}
.tab_li {
width: 334rpx;
}
.tab_on .tab_li_line {
border-radius: 8rpx;
-webkit-border-radius: 8rpx;
-moz-border-radius: 8rxp;
background-color: #ff8a00;
}
.tab_li_line {
width: 40rpx;
height: 8rpx;
margin: 10rpx auto 0;
}
.tab_line {
width: 2rpx;
height: 37rpx;
background-color: #e5e5e5;
}
.t_c {
text-align: center;
}
3.js
// 3/3.js
Page({
/**
* 页面的初始数据
*/
data: {
currentData: 0
},
// tab切换
changeTab: function(e) {
const that = this;
console.log(e.currentTarget.dataset.current);
that.setData({
currentData: e.currentTarget.dataset.current
})
}
})
4.效果