WeChat applet development implementation tab (TabBar at the top of the window) page switch

This article describes how to switch the tab (TabBar at the top of the window) of Applet development. it has some reference value. if you need it, you can understand it. In applet development, fragment is generally used for tabs in Android. when it comes to the applet, it instantly becomes awesome.

Finally, let's share it.

First look at the effect:

Run the following code:

1. index. wxml

  
    
  
   
Haha
     
  
   
Haha
     
  
   
Hey
   
   
    
     
      
   
    
I am haha
      
     
     
      
   
    
I am haha
      
     
     
      
   
    
Hey, I am.
      
   
 

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 // Obtain the application instance var app = getApp () Page ({data: {/*** Page configuration */winWidth: 0, winHeight: 0, // tab switch currentTab: 0 ,}, onLoad: function () {var that = this;/*** obtain system information */wxgetSystemInfo ({success: function (res) {thatsetData ({winWidth: reswindowWidth, winHeight: reswindowHeight}) ;}) ;},/*** slide to switch the tab */bindChange: function (e) {var that = this; thatsetData ({currentTab: edetailcurrent}) ;},/*** click the tab to switch */swichNav: function (e) {var that = this; if (thisdatacurrentTab == etargetdatasetcurrent) {return false ;} else {thatsetData ({currentTab: etargetdatasetcurrent })}}})

In this way, a top tab similar to viewpage is displayed.

For more information on the implementation tab of Applet development (TabBar at the top of the window) page switch, see PHP!