微信小程序?qū)崿F(xiàn)選項卡的方法

更新時間：2022年07月18日 17:04:27 作者：itfallrain

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)選項卡的方法，利用swiper組件實現(xiàn)選項卡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)選項卡的具體代碼，供大家參考，具體內(nèi)容如下

微信小程序里沒有自帶選項卡組件，但是卻帶有swiper組件，所以，我們便利用swiper來實現(xiàn)選項卡的功能。

先看效果圖：

test.wxml

<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 class='swi' 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>

test.js

var app=getApp()
Page({
?data:{
? currentTab:0
?},
?onLoad:function(options){
? // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
?
?},
?//滑動切換
?swiperTab:function( e ){
? var that=this;
? that.setData({
? ?currentTab: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?
? ?})?
? }?
?}?
?
})

test.wxss

.swi {
? width: 100%;
? height: 100vh;

}
.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.33%;
? color:red;
}
.active{
? color:aqua;
? border-bottom: 4rpx solid red;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: