1. 极速快三屋首页
  2. 站长学院
  3. 搭建教程

微信小程序之选项卡的实现方法

微信小程序里没有自带选项卡组件,但是却带有swiper组件,所以,我们便利用swiper来实现选项卡的功能。

先看效果图:

微信小程序之选项卡的实现方法

 

微信小程序之选项卡的实现方法

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   // 页面初始化 options为页面跳转所带来的参数
39  
40  },
41  //滑动切换
42  swiperTab:function( e ){
43   var that=this;
44   that.setData({
45    currentTba:e.detail.current
46   });
47  },
48  //点击切换
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 }

本文由(极速快三屋@)整理自网络,如转载请注明出处:http://jinlimeng.cn/31416.html

本站发布的内容若侵犯到您的权益,请邮件联系 admin@yuanmawu.net  删除,我们将及时处理!

=========================================

本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。

本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。

若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。

发表评论

登录后才能评论

联系我们

在线咨询:点击这里给我发消息

邮件:admin@yuanmawu.net

QR code