微信小程序开发之选项卡(窗口顶部/底部TabBar)页面切换

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

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

先看效果:

再上代码:

1.index.wxml

 <view class="swiper-tab">
     <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">哈哈view>
     <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">呵呵view>
     <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">嘿嘿view>
 view>

 <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">

     <swiper-item>
       <view>我是哈哈view>
     swiper-item>

     <swiper-item>
       <view>我是呵呵view>
     swiper-item>

     <swiper-item>
       <view>我是嘿嘿view>
     swiper-item>
 swiper>

2.index.wxss

 /**index.wxss**/
 .swiper-tab{
     width: 100%;
     border-bottom: 2rpx solid #777777;
     text-align: center;
     line-height: 80rpx;}
 .swiper-tab-list{  font-size: 30rpx;
     display: inline-block;
     width: 33.33%;
     color: #777777;
 }
 .on{ color: #da7c0c;
     border-bottom: 5rpx solid #da7c0c;}

 .swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }
 .swiper-box view{
     text-align: center;
 }

3.index.js

 //index.js
 //获取应用实例
 var app = getApp()
 Page( {
   data: {
     /**
         * 页面配置
         */
     winWidth: 0,
     winHeight: 0,
     // tab切换
     currentTab: 0,
   },
   onLoad: function() {
     var that = this;

     /**
      * 获取系统信息
      */
     wx.getSystemInfo( {

       success: function( res ) {
         that.setData( {
           winWidth: res.windowWidth,
           winHeight: res.windowHeight
         });
       }

     });
   },
   /**
      * 滑动切换tab
      */
   bindChange: function( e ) {

     var that = this;
     that.setData( { currentTab: e.detail.current });

   },
   /**
    * 点击tab切换
    */
   swichNav: function( e ) {

     var that = this;

     if( this.data.currentTab === e.target.dataset.current ) {
       return false;
     } else {
       that.setData( {
         currentTab: e.target.dataset.current
       })
     }
   }
 })

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

demo下载地址

这样一个类似viewpage的顶部选项卡就出来了.

-----------------------------------------------------------------------------------

微信小程序开发中窗口底部tab栏切换页面很简单很方便.

代码:

1.app.json

 //app.json
 {
   "pages":[
     "pages/index/index",
     "pages/logs/logs"
   ],
   "window":{
     "backgroundTextStyle":"light",
     "navigationBarBackgroundColor": "#999999",
     "navigationBarTitleText": "tab",
     "navigationBarTextStyle":"white"
   },
    "tabBar": {
     "color": "#ccc",
     "selectedColor": "#35495e",
     "borderStyle": "white",
     "backgroundColor": "#f9f9f9",
     "list": [
       {
         "text": "首页",
         "pagePath": "pages/index/index",
         "iconPath": "images/home.png",
         "selectedIconPath": "images/home-actived.png"
       },
       {
         "text": "目录",
         "pagePath": "pages/catalogue/catalogue",
         "iconPath": "images/note.png",
         "selectedIconPath": "images/note-actived.png"
       },
       {
         "text": "我的",
         "pagePath": "pages/mine/mine",
         "iconPath": "images/profile.png",
         "selectedIconPath": "images/profile-actived.png"
       }
     ]
   }
 }

pagePath是页面路径.iconPath是图片路径，icon 大小限制为40kb.

selectedIconPath:选中时的图片路径，icon 大小限制为40kb

tab Bar的最多5个,最少2个.

在pages目录下写好页面即可切换.

http://blog.csdn.net/qq_31383345