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

20161023115510012.gif

1、index.wxml

  
  
    哈哈  
    呵呵  
    嘿嘿  
  
  
  
      
      
      我是哈哈  
      
      
      
      我是呵呵  
      
      
      
      我是嘿嘿  
      
 

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  
          })  
        }  
      }  
    })