顶部导航栏之一(选项卡TabBar动态显示几个 滑动，点击)

<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)

},

})