WeChat applet development to implement tab page switching-Mini Program Development-php.cn

This article mainly introduces the tab (TabBar at the top of the window) page switching in WeChat applet development. It has certain reference value. You can learn more if you need it.

Tabs are being developed in WeChat applet. Tabs in Android generally use fragments, but when it came to the applet, I was instantly confused.

Finally made it. Share it and have a look.

Look at the effect first:

Then add the code:

1.index.wxml

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

Copy after login

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

Copy after login

3.index.js

//index.js //获取应用实例 var app = getApp() Page( { data: { /** * 页面配置 */ winWidth: 0, winHeight: 0, // tab切换 currentTab: 0, }, onLoad: function() { var that = this; /** * 获取系统信息 */ wxgetSystemInfo( { success: function( res ) { thatsetData( { winWidth: reswindowWidth, winHeight: reswindowHeight }); } }); }, /** * 滑动切换tab */ bindChange: function( e ) { var that = this; thatsetData( { currentTab: edetailcurrent }); }, /** * 点击tab切换 */ swichNav: function( e ) { var that = this; if( thisdatacurrentTab === etargetdatasetcurrent ) { return false; } else { thatsetData( { currentTab: etargetdatasetcurrent }) } } })

Copy after login

Such a top tab similar to a viewpage appears.

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to PHP Chinese website!

Related recommendations:

Implementation of page jump value transfer in WeChat mini program

WeChat mini program How to use textarea

#WeChat applet Implementation of monitoring gesture sliding to switch pages

The above is the detailed content of WeChat applet development to implement tab page switching. For more information, please follow other related articles on the PHP Chinese website!