您好,登錄后才能下訂單哦!
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)選項(xiàng)卡,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
微信小程序之選項(xiàng)卡的實(shí)現(xiàn)方法
前言:
從事前端的同學(xué)們一定不會(huì)對選項(xiàng)卡陌生,不管是自己原生寫的,還是各個(gè)UI框架里帶的,我想大家都使用過很多選項(xiàng)卡,對選項(xiàng)卡的原理也足夠清楚了,下面我們來在微信小程序里實(shí)現(xiàn)選項(xiàng)卡的功能。
微信小程序里沒有自帶選項(xiàng)卡組件,但是卻帶有swiper組件,所以,我們便利用swiper來實(shí)現(xiàn)選項(xiàng)卡的功能。
先看效果圖:
實(shí)現(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ù) }, //滑動(dòng)切換 swiperTab:function( e ){ var that=this; that.setData({ currentTba: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 }) } } })
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.33%; color:red; } .active{ color:aqua; border-bottom: 4rpx solid red; }
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“微信小程序如何實(shí)現(xiàn)選項(xiàng)卡”這篇文章對大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。