Implementation of micro-credit Program Development tab (Tabbar at top of window) page Toggle _javascript Tips

Micro-Letter Small Program Development tab. In the Android tab is generally used fragment, to the small program here a moment of Meng force.

It's finally done. Share it out and see.

First look at the effect:

And then the code:

1.index.wxml

<!--index.wxml--> 
<view class= "Swiper-tab" > 
  <view class= "swiper-tab-list {{currenttab==0? ' On ': ' ' data-current= ' 0 ' bindtap= ' swichnav ' > haha </view> 
  <view class= ' swiper-tab-list {{Currenttab ==1? ' On ': ' "data-current=" 1 "bindtap=" Swichnav "> Hehe </view> 
  <view class=" swiper-tab-list {{Currenttab ==2? ' On ': ' "data-current=" 2 "bindtap=" Swichnav "> Hehe </view> 
</view> 
 
<swiper current=" {{ Currenttab}} "class=" Swiper-box "duration=" style= "height:{{winheight-31}}px" bindchange= "Bindchange" > 
  <!--I'm haha--> 
  <swiper-item> 
   <view> I'm haha </view> 
  </swiper-item> 
  <!--I was hehe--> 
  <swiper-item> 
   <view> I was hehe </view> 
  </swiper-item> 
  <!--I'm hehe--> 
  <swiper-item> 
   <view> I'm hehe </view> 
  </swiper-item> 
</swiper> 

2.indexwxss

/**indexwxss**/ 
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%; 
  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 
//Get application instance 
var app = Getapp () page 
({ 
 data: { 
  /** 
    * * Pages Configuration * * 
  winwidth:0, 
  winheight:0, 
  //tab Toggle 
  currenttab:0, 
 }, 
 onload:function () { 
  var that = this; 
 
  /** 
   * Get System Information 
  /wxgetsysteminfo ({ 
 
   success:function (res) { 
    thatsetdata ({ 
     winwidth: Reswindowwidth, 
     winheight:reswindowheight 
    }); 
   } 
 , 
 /** 
   * Sliding tab Toggle 
 Bindchange:function (e) { 
 
  var = this; 
  Thatsetdata ({currenttab:edetailcurrent}); 
 /** 
  * Click Tab Switch * * 
 swichnav:function (e) C38/>var that = this; 
 
  if (Thisdatacurrenttab = = etargetdatasetcurrent) {return 
   false; 
  } else { 
   thatsetdata ({ 
    Currenttab:etargetdatasetcurrent})}} 
) 

Such a viewpage-like top tab comes out.