Development of WeChat mini program tab function

This article mainly shares with you the development of the tab function of the WeChat applet, hoping to help everyone

Create the swipertab folder in the pages file

1. Write the page structure: swipertab.wxml

  
    tab一  
    tab二  
    tab三  
  
  
      
      
      tab一  
      
      
      
      tab二  
      
      
      
      tab三  
      

2.Set data: swipertab.js

//获取应用实例  
var app = getApp()
Page({
	data: {
		/** 
		 * 页面配置
		 */
		winWidth: 0,
		winHeight: 0,
		// tab切换  
		currentTab: 0,
	},
	onLoad: function() {
		var that = this;

		/** 
		 * 获取系统信息
		 */
		wx.getSystemInfo({

			success: function(res) {
				that.setData({
					winWidth: res.windowWidth,
					winHeight: res.windowHeight
				});
			}

		});
	},
	/** 
	 * 滑动切换tab
	 */
	bindChange: function(e) {

		var that = this;
		that.setData({
			currentTab: e.detail.current
		});

	},
	/** 
	 * 点击tab切换
	 */
	swichNav: function(e) {

		var that = this;

		if (this.data.currentTab === e.target.dataset.current) {
			return false;
		} else {
			that.setData({
				currentTab: e.target.dataset.current
			})
		}
	}
})

3. Set style: swipertab.wxss

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

4. Head title modification: swipertab.json

{
    "navigationBarTitleText": "选项卡页面切换"
}

5. Rendering

##Note: Because the file name is not index, remember to modify the app.json file (bottom Note), otherwise the page will not be displayed and

## will not be displayed at the bottom. #Related recommendations:

The above is the detailed content of Development of WeChat mini program tab function. For more information, please follow other related articles on the PHP Chinese website!