微信小程序之選項(xiàng)卡的實(shí)現(xiàn)方法
發(fā)布時(shí)間：2021-06-30 09:18 所屬欄目：小程序開(kāi)發(fā)教程
微信小程序里沒(méi)有自帶選項(xiàng)卡組件，但是卻帶有swiper組件，所以，我們便利用swiper來(lái)實(shí)現(xiàn)選項(xiàng)卡的功能。
先看效果圖：
wxml代碼：
1 <view class="swiper-tab">
2 <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">一</view>
3 <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">二</view>
4 <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">三</view>
5 </view>
6
7 <swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">
8 <swiper-item><view>第一屏</view></swiper-item>
9 <swiper-item><view>第二屏</view></swiper-item>
10 <swiper-item><view>第三屏</view></swiper-item>
11 </swiper>
12
|
js代碼
32 var app=getApp()
33 Page({
34 data:{
35 currentTab:0
36 },
37 onLoad:function(options){
38 // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
39
40 },
41 //滑動(dòng)切換
42 swiperTab:function( e ){
43 var that=this;
44 that.setData({
45 currentTba:e.detail.current
46 });
47 },
48 //點(diǎn)擊切換
49 clickTab: function( e ) {
50
51 var that = this;
52
53 if( this.data.currentTab === e.target.dataset.current ) {
54 return false;
55 } else {
56 that.setData( {
57 currentTab: e.target.dataset.current
58 })
59 }
60 }
61
62 })
|
css代碼
18 .swiper-tab{
19 width: 100%;
20 border-bottom: 2rpx solid #ccc;
21 text-align: center;
22 height: 88rpx;
23 line-height: 88rpx;
24 font-weight: bold;
25 }
26 .swiper-tab-item{
27 display: inline-block;
28 width: 33.33%;
29 color:red;
30 }
31 .active{
32 color:aqua;
33 border-bottom: 4rpx solid red;
34 }
|
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源
碼云倉(cāng)庫(kù):
本文地址：http://22321a.com/wxmini/doc/course/26833.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
