【移動應用開發(fā)技術(shù)】小程序開發(fā)之選項卡怎么弄

【移動應用開發(fā)技術(shù)】小程序開發(fā)之選項卡怎么弄

這篇文章主要介紹小程序開發(fā)之選項卡怎么弄，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！微信小程序選項卡的簡單實例看下效果代碼：home.wxml<!s/home/home.wxml-->

<view

class="swiper-tab">

<view

class="swiper-tab-item

{{currentTab==0

?

'on'

:

''}}"

data-current="0"

bindtap="swichNav">熱門</view>

<view

class="swiper-tab-item

{{currentTab==1

?

'on'

:

''}}"

data-current="1"

bindtap="swichNav">關(guān)注</view>

<view

class="swiper-tab-item

{{currentTab==2

?

'on'

:

''}}"

data-current="2"

bindtap="swichNav">好友</view>

</view>

<swiper

current="{{currentTab}}"

class="swiper-box"

duration="300"

style="height:{{winHeight

-

80}}px"

bindchange="bindChange">

<swiper-item>

<view>熱門</view>

</swiper-item>

<swiper-item>

<view>關(guān)注</view>

</swiper-item>

<swiper-item>

<view>好友</view>

</swiper-item>

</swiper>home.wxss/*

pages/home/home.wxss

*/

.swiper-tab{

width:

100%;

border-bottom:

2rpx

solid

#eeeeee;

text-align:

center;

line-height:

80rpx;}

.swiper-tab-item{

font-size:

30rpx;

display:

inline-block;

width:

33.33%;

color:

#666666;

}

.on{

color:

#f10b2e;

border-bottom:

5rpx

solid

#f10b2e;}

.swiper-box{

display:

block;

height:

100%;

width:

100%;

overflow:

hidden;

}

.swiper-box

view{

text-align:

center;

}home.js//

pages/home/home.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

});

}

});

},

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)

{

retur