【移動應(yīng)用開發(fā)技術(shù)】微信小程序中如何制作選項卡

這篇文章主要介紹微信小程序中如何制作選項卡，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！微信小程序之選項卡的實現(xiàn)方法前言：從事前端的同學們一定不會對選項卡陌生，不管是自己原生寫的，還是各個UI框架里帶的，我想大家都使用過很多選項卡，對選項卡的原理也足夠清楚了，下面我們來在微信小程序里實現(xiàn)選項卡的功能。微信小程序里沒有自帶選項卡組件，但是卻帶有swiper組件，所以，我們便利用swiper來實現(xiàn)選項卡的功能。先看效果圖：實現(xiàn)代碼：頁面代碼：<view

class="swiper-tab">

<view

class="swiper-tab-item

{{currentTab==0?'active':''}}"

data-current="0"

bindtap="clickTab">一</view>

<view

class="swiper-tab-item

{{currentTab==1?'active':''}}"

data-current="1"

bindtap="clickTab">二</view>

<view

class="swiper-tab-item

{{currentTab==2?'active':''}}"

data-current="2"

bindtap="clickTab">三</view>

</view>

<swiper

current="{{currentTab}}"

duration="300"

bindchange="swiperTab">

<swiper-item><view>第一屏</view></swiper-item>

<swiper-item><view>第二屏</view></swiper-item>

<swiper-item><view>第三屏</view></swiper-item>

</swiper>js代碼：var

app=getApp()

Page({

data:{

currentTab:0

},

onLoad:function(options){

//

頁面初始化

options為頁面跳轉(zhuǎn)所帶來的參數(shù)

},

//滑動切換

swiperTab:function(

e

){

var

that=this;

that.setData({

currentTba:e.detail.current

});

},

//點擊切換

clickTab:

function(

e

)

{

var

that

=

this;

if(

this.data.currentTab

===

e.target.dataset.current

)

{

return

false;

}

else

{

that.setData(

{

currentTab:

e.target.dataset.current

})

}

}

})css代碼：.swiper-tab{

width:

100%;

border-bottom:

2rpx

solid

#ccc;

text-align:

center;

height:

88rpx;

line-height:

88rpx;

font-weight:

bold;

}

.swiper-tab-item{

display:

inline-block;

width:

33