In the development of wechat applets, the tabs are generally fragment in android, which makes you feel confused when it comes to the applets

Finally, it's done. Share it and have a look

First look at the effect:

Add the code:

1.index.wxml

1. <!--index.wxml-->  
2. <view class="swiper-tab">  
3.     <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Ha-ha</view>  
4.     <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Ha-ha</view>  
5.     <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Hey</view>  
6. </view>  
7.   
8. <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">  
9.     <!-- I am ha ha -->  
10.     <swiper-item>  
11.       <view>I am ha ha</view>  
12.     </swiper-item>  
13.     <!-- I am ha ha -->  
14.     <swiper-item>  
15.       <view>I am ha ha</view>  
16.     </swiper-item>  
17.     <!-- I'm hehe -->  
18.     <swiper-item>  
19.       <view>I'm hehe</view>  
20.     </swiper-item>  
21. </swiper>  

2.index.wxss

1. /**index.wxss**/  
2. .swiper-tab{  
3.     width: 100%;  
4.     border-bottom: 2rpx solid #777777;  
5.     text-align: center;  
6.     line-height: 80rpx;}  
7. .swiper-tab-list{  font-size: 30rpx;  
8.     display: inline-block;  
9.     width: 33.33%;  
10.     color: #777777;  
11. }  
12. .on{ color: #da7c0c;  
13.     border-bottom: 5rpx solid #da7c0c;}  
14.   
15. .swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }  
16. .swiper-box view{  
17.     text-align: center;  
18. }  

3.index.js

1. //index.js  
2. //Get application instance  
3. var app = getApp()  
4. Page( {  
5.   data: {  
6.     /** 
7.         * Page configuration 
8.         */  
9.     winWidth: 0,  
10.     winHeight: 0,  
11.     //tab switching  
12.     currentTab: 0,  
13.   },  
14.   onLoad: function() {  
15.     var that = this;  
16.   
17.     /** 
18.      * Get system information 
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.      * Slide switch tab 
33.      */  
34.   bindChange: function( e ) {  
35.   
36.     var that = this;  
37.     that.setData( { currentTab: e.detail.current });  
38.   
39.   },  
40.   /** 
41.    * Click tab to switch 
42.    */  
43.   swichNav: function( e ) {  
44.   
45.     var that = this;  
46.   
47.     if( this.data.currentTab === e.target.dataset.current ) {  
48.       return false;  
49.     } else {  
50.       that.setData( {  
51.         currentTab: e.target.dataset.current  
52.       })  
53.     }  
54.   }  
55. })  

No code has been uploaded before. This is the code below

demo download address

Such a top tab similar to the view page will come out

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

In the development of wechat applet, it is very simple and convenient to switch pages in the tab bar at the bottom of the window

code:

1.app.json

1. //app.json  
2. {  
3.   "pages":[  
4.     "pages/index/index",  
5.     "pages/logs/logs"  
6.   ],  
7.   "window":{  
8.     "backgroundTextStyle":"light",  
9.     "navigationBarBackgroundColor": "#999999",  
10.     "navigationBarTitleText": "tab",  
11.     "navigationBarTextStyle":"white"  
12.   },  
13.    "tabBar": {  
14.     "color": "#ccc",  
15.     "selectedColor": "#35495e",  
16.     "borderStyle": "white",  
17.     "backgroundColor": "#f9f9f9",  
18.     "list": [  
19.       {  
20.         "text": "home page",  
21.         "pagePath": "pages/index/index",  
22.         "iconPath": "images/home.png",  
23.         "selectedIconPath": "images/home-actived.png"  
24.       },  
25.       {  
26.         "text": "Catalog",  
27.         "pagePath": "pages/catalogue/catalogue",  
28.         "iconPath": "images/note.png",  
29.         "selectedIconPath": "images/note-actived.png"  
30.       },  
31.       {  
32.         "text": "My",  
33.         "pagePath": "pages/mine/mine",  
34.         "iconPath": "images/profile.png",  
35.         "selectedIconPath": "images/profile-actived.png"  
36.       }  
37.     ]  
38.   }  
39. }  

pagePath is the page path. iconPath is the picture path, icon Size limit is 40kb

selectedIconPath: the path of the selected image, icon Size limited to 40kb

The maximum number of tab Bar is 5 and the minimum number is 2

Write the page in the pages directory to switch

http://blog.csdn.net/qq_31383345