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

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

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

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

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

先看效果圖：

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){
? // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
?
?},
?//滑動(dòng)切換
?swiperTab:function( e ){
? var that=this;
? that.setData({
? ?currentTab:e.detail.current
? });
?},
?//點(diǎn)擊切換
?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;
}

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

您可能感興趣的文章:

相關(guān)文章

javascript實(shí)現(xiàn)前端分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)前端分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
用js實(shí)現(xiàn)預(yù)覽待上傳的本地圖片
用js實(shí)現(xiàn)預(yù)覽待上傳的本地圖片...
2007-03-03
使用JavaScript實(shí)現(xiàn)文本收起展開(省略)功能
省略號(hào),作為一種常見的文本處理方式,在很多情況下都十分常見,特別是當(dāng)我們需要在省略號(hào)后面添加額外文字時(shí),本文為大家介紹了使用JavaScript實(shí)現(xiàn)文本收起展開功能的相關(guān)方法,希望對(duì)大家有所幫助
2024-04-04
如何使用js獲取擴(kuò)展名詳解
給你一個(gè)文件名,你能獲得它的擴(kuò)展名嗎?這篇文章主要給大家介紹了關(guān)于如何使用js獲取擴(kuò)展名的相關(guān)資料,文中介紹了幾種實(shí)現(xiàn)的方法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-02-02
微信小程序如何通過(guò)用戶授權(quán)獲取手機(jī)號(hào)(getPhoneNumber)
這篇文章主要介紹了微信小程序如何通過(guò)用戶授權(quán)獲取手機(jī)號(hào)(getPhoneNumber),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-01-01
快速掌握WordPress中加載JavaScript腳本的方法
這篇文章主要介紹了快速掌握WordPress中加載JavaScript腳本的方法,以及響應(yīng)的CSS樣式加載方法的簡(jiǎn)介,需要的朋友可以參考下
2015-12-12
JS實(shí)現(xiàn)放大鏡效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
JavaScript中檢查對(duì)象property的存在性方法介紹
這篇文章主要介紹了JavaScript中檢查對(duì)象property的存在性方法介紹,本文講解了4種方法來(lái)檢查某個(gè)對(duì)象o是否擁有property x,需要的朋友可以參考下
2014-12-12
js截取固定長(zhǎng)度的中英文字符的簡(jiǎn)單實(shí)例
下面是自己寫的一個(gè)簡(jiǎn)單的函數(shù)，用于截取固定長(zhǎng)度的字符串，中英文都適用.若有不妥之處還請(qǐng)高手指正
2013-11-11
JavaScript 條件判斷與比較運(yùn)算示例代碼
這篇文章主要介紹了JavaScript 條件判斷與比較運(yùn)算,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-01-01