<view class="navbar">
<text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="100" style="height:{{winHeight - 31}}px" bindchange="trendsSwiperChange">
<swiper-item>我是第一个页面</swiper-item>
<swiper-item>我是第二个页面</swiper-item>
</swiper>
.navbar {
flex: none;
display: flex;
background: #fff;
border-bottom: 2rpx solid #ddd;
text-align: center;
line-height: 80rpx;
}
.navbar .item {
position: relative;
flex: auto;
text-align: center;
line-height: 80rpx;
}
.navbar .item.active {
color: #e60012;
}
.navbar .item.active:after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4rpx;
background: #e60012;
}
var app = getApp()
Page({
data: {
navbar: ['男装', '女装'], //选项卡 导航
currentTab: 0, //选项卡 索引
},
// 点击切换选项卡
navbarTap: function (e) {
this.setData({
currentTab: e.currentTarget.dataset.idx
})
console.log('最怕空气突然安静(点击)' + e.target.dataset.idx)
},
// 点击切换选项卡
trendsSwiperChange: function (e) {
var that = this;
that.setData({
currentTab: e.detail.current
});
console.log('最怕朋友突然的关心(滑动)' + e.detail.current)
},
})