2018-05-21

swiper制作tab切换 （导航栏等显示横向切换，下面出现斜杠。swiper-tab-list 这里是初始样式，{{currentTab==0 ? 'on' : ''}}"`这里是，你点击之后如果currentTab==0那么就使用on这个样式）

1.index.html

<view class=``"swiper-tab"``>

<view class=``"swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current=``"0" bindtap=``"swichNav"``>Seside1</view>

<view class=``"swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current=``"1" bindtap=``"swichNav"``>Seside2</view>

<view class=``"swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current=``"2" bindtap=``"swichNav"``>Seside3</view>

</view>

<swiper current=``"{{currentTab}}" class=``"swiper-box" duration=``"300" style=``"height:{{winHeight - 31}}px" bindchange=``"bindChange"``>

<swiper-item>

<view>Seside1</view>

</swiper-item>

<swiper-item>

<view>Seside2</view>

</swiper-item>

<swiper-item>

<view>Seside3</view>

</swiper-item>

</swiper>

index.css
.swiper-tab{

width: 100%;

border-bottom: 2rpx solid #777777;

text-align: center;

line-height: 80rpx;

}

.swiper-tab-list{

font-size: 30rpx;

display: inline-block;

width: 20%;

color: #777777;

}

.on{

color: #da7c0c;

border-bottom: 5rpx solid #da7c0c;

}

.swiper-box{

display: block;

height: 100%;

width: 100%;

overflow: hidden;

}

.swiper-box view{

text-align: center;

}

|

//index.js

//获取应用实例

var app = getApp()

Page( {

data: {

// 页面配置

winWidth: 0,

winHeight: 0,

// tab切换

currentTab: 0,

},

onLoad: function``() {

var that = this``;

// 获取系统信息

wx.getSystemInfo( {

success: function``( res ) {

that.setData( {

winWidth: res.windowWidth,

winHeight: res.windowHeight

});

}

});

},

// 滑动切换tab

bindChange: function``( e ) {

var that = this``;

that.setData( { currentTab: e.detail.current });

},

// 点击tab切换

swichNav: function``( e ) {

var that = this``;

if``( this``.data.currentTab === e.target.dataset.current ) {

return false``;

}``else``{

that.setData( {

currentTab: e.target.dataset.current

})

}

}

})

|