Wechat applet development tab (tabbar at the top / bottom of the window) page switching

Keywords: JSON Fragment Android

;

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.     width100%;  
  4.     border-bottom2rpx solid #777777;  
  5.     text-aligncenter;  
  6.     line-height80rpx;}  
  7. .swiper-tab-list{  font-size30rpx;  
  8.     display: inline-block;  
  9.     width33.33%;  
  10.     color#777777;  
  11. }  
  12. .on{ color#da7c0c;  
  13.     border-bottom5rpx solid #da7c0c;}  
  14.   
  15. .swiper-box{ displayblockheight100%width100%overflowhidden; }  
  16. .swiper-box view{  
  17.     text-aligncenter;  
  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.     ifthis.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

Posted by dtdetu on Tue, 05 May 2020 17:48:29 -0700