微信小程序---tab切换

微信小程序开发中选项卡.在android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.

总算做出来了.分享出来看看.

先看效果:


再上代码:

1.index.wxml

[html]  view plain  copy
  1. <!--index.wxml-->  
  2. <view class="swiper-tab">  
  3.     <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">哈哈</view>  
  4.     <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">呵呵</view>  
  5.     <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">嘿嘿</view>  
  6. </view>  
  7.   
  8. <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">  
  9.     <!-- 我是哈哈 -->  
  10.     <swiper-item>  
  11.       <view>我是哈哈</view>  
  12.     </swiper-item>  
  13.     <!-- 我是呵呵 -->  
  14.     <swiper-item>  
  15.       <view>我是呵呵</view>  
  16.     </swiper-item>  
  17.     <!-- 我是嘿嘿 -->  
  18.     <swiper-item>  
  19.       <view>我是嘿嘿</view>  
  20.     </swiper-item>  
  21. </swiper>  
2.index.wxss

[css]  view plain  copy
  1. /**index.wxss**/  
  2. .swiper-tab{  
  3.     width100%;  
  4.     border-bottom2rpx solid #777777;  
  5.     text-aligncenter;  
  6.     line-height80rpx;}  
  7. .swiper-tab-list{  font-size30rpx;  
  8.     display: inline-block;  
  9.     width33.33%;  
  10.     color#777777;  
  11. }  
  12. .on{ color#da7c0c;  
  13.     border-bottom5rpx solid #da7c0c;}  
  14.   
  15. .swiper-box{ displayblockheight100%width100%overflowhidden; }  
  16. .swiper-box view{  
  17.     text-aligncenter;  
  18. }  

3.index.js

[javascript]  view plain  copy
  1. //index.js  
  2. //获取应用实例  
  3. var app = getApp()  
  4. Page( {  
  5.   data: {  
  6.     /** 
  7.         * 页面配置 
  8.         */  
  9.     winWidth: 0,  
  10.     winHeight: 0,  
  11.     // tab切换  
  12.     currentTab: 0,  
  13.   },  
  14.   onLoad: function() {  
  15.     var that = this;  
  16.   
  17.     /** 
  18.      * 获取系统信息 
  19.      */  
  20.     wx.getSystemInfo( {  
  21.   
  22.       success: function( res ) {  
  23.         that.setData( {  
  24.           winWidth: res.windowWidth,  
  25.           winHeight: res.windowHeight  
  26.         });  
  27.       }  
  28.   
  29.     });  
  30.   },  
  31.   /** 
  32.      * 滑动切换tab 
  33.      */  
  34.   bindChange: function( e ) {  
  35.   
  36.     var that = this;  
  37.     that.setData( { currentTab: e.detail.current });  
  38.   
  39.   },  
  40.   /** 
  41.    * 点击tab切换 
  42.    */  
  43.   swichNav: function( e ) {  
  44.   
  45.     var that = this;  
  46.   
  47.     ifthis.data.currentTab === e.target.dataset.current ) {  
  48.       return false;  
  49.     } else {  
  50.       that.setData( {  
  51.         currentTab: e.target.dataset.current  
  52.       })  
  53.     }  
  54.   }  
  55. })  


之前没有上传代码.这是下图的代码

demo下载地址



这样一个类似viewpage的顶部选项卡就出来了.
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值