【移動應用開發技術】微信小程序如何實現頂部選項卡swiper

這篇文章給大家分享的是有關微信小程序如何實現頂部選項卡swiper的內容。在下覺得挺實用的，因此分享給大家做個參考，一起跟隨在下過來看看吧。效果圖：下面直接上代碼:wxml:<!s/index/index.wxml-->

<view

class="swiper-tab">

<view

class="tab-item

{{currentTab==0

?

'on'

:

''}}"

data-current="0"

bindtap="swichNav">選項一</view>

<view

class="tab-item

{{currentTab==1

?

'on'

:

''}}"

data-current="1"

bindtap="swichNav">選項二</view>

<view

class="tab-item

{{currentTab==2

?

'on'

:

''}}"

data-current="2"

bindtap="swichNav">選項三</view>

</view>

<swiper

current="{{currentTab}}"

class="swiper"

duration="300"

style="height:{{winHeight

-

30}}px"

bindchange="bindChange">

<swiper-item>

<view>頁面一</view>

</swiper-item>

<swiper-item>

<view>頁面二</view>

</swiper-item>

<swiper-item>

<view>頁面三</view>

</swiper-item>

</swiper>wxss:/*

pages/index/index.wxss

*/

.swiper-tab{

width:

100%;

text-align:

center;

line-height:

80rpx;

border-bottom:

1px

solid

#000;

display:

flex;

flex-direction:

row;

justify-content:

center;

}

.tab-item{

flex:

1;

font-size:

30rpx;

display:

inline-block;

color:

#777777;

}

.on{

color:

red;

border-bottom:

5rpx

solid

red;

}

.swiper{

display:

block;

height:

100%;

width:

100%;

overflow:

hidden;

}

.swiper

view{

text-align:

center;

padding-top:

100rpx;

}js://

pages/index/index.js

Page({

/**

*

頁面的初始數據

*/

data:

{

winWidth:0,

winHeight:0,

currentTab:0

},

/**

*

生命周期函數--監聽頁面加載

*/

onLoad:

function

(options)

{

var

that

=

this;

/**

*

獲取系統信息

*/

wx.getSystemInfo({

success:

function

(res)

{

that.setData({

winWidth:

res.windowWidth,

winHeight:

res.windowHeight

});

}

});

},

bindChange:

function

(e)

{

var

that

=

this;

that.setData({

currentTab:

e.detail.current

});

},

swichNav:

function

(e)

{

var

that

=

this;

if

(this.data.currentTab

===

e.target.dataset.current)

{

return

false;

}

else

{

that.setData({

currentTab:

e.target.dataset.current

})

}

}

,

/**

*

頁面相關事件處理函數--監聽用戶下拉動作

*/

onPullDownRefresh:

function

()

{

},

/**

*

頁面上拉觸底事件的處理函數

*/

onReachBottom:

function

()

{

},

/**

*

用戶點擊右上角分享

*/

onShareAppMessage:

functio