全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[石家庄seo公司就找久澳]微信小程序选项卡功能的开发

  本文主要和大家分享微信小程序选项卡功能的开发•=□•,希望能帮助到大家

  

在pages文件里面创建swipertab文件夹

  

1.编写页面结构:swipertab.wxml

  

<▼▷!--swipertab.wxml-->
<view class="▪△;swiper-tab"> 
 <▽★□;view class="▲●★;swiper-tab-list {{currentTab==0 ? 'on'-▽; : '□▼▼-;'••…;}}" data-current="▷●●;0" bindtap="…=◆▼;swichNav"◁▷;>tab一</view> 
 <view class="○▲▽▷;swiper-tab-list {{currentTab==1 ? 'on' : '=◁▪;'}}"▲□●; data-current="1"•□◁; bindtap="swichNav">tab二</view> 
 <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''-◁▷=;}}" data-current="2" bindtap="swichNav"•■◁;>tab三</view> 
</view>◁△□; 
<swiper current="☆◆■;{{currentTab}}" class="swiper-box"-•▲▲; duration="300"★○◆; style="height▪△▽:{{winHeight - 31}}px" bindchange="bindChange">……▲-; 
 <!-- tab一 --> 
 <swiper-item>▽○; 
 <•☆;view>tab一<…▽▷;/view> 
 </swiper-item> 
 <★••!-- tab二 --> 
 <swiper-item> 
 <view>tab二</view> 
 <△■▲•;/swiper-item> 
 <!-- tab三 --> 
 <•□▪;swiper-item>△◆●; 
 <view>tab三<◆•□;/view> 
 </swiper-item> 
</swiper>▼▷-;

2.设置数据●□: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▷◁…△.设置样式●▲-▪: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•-=.头部标题修改•…▪-:swipertab•◆.json

  

 

  

{
 "navigationBarTitleText"▽★◇●: "选项卡页面切换"
}

5.效果图

  

 

  


 

  

注意:因为文件名不是index☆□•,所以记得修改app.json文件(底下备注的地方)●…=…,淄博市小程序开发哪家好枣阳市小程序制作公司三门峡市小程序开发哪家好[石家庄seo公司就找久澳]否则页面不会显示同时底部不会显示

  


 

  

相关推荐▲▪:

  

原生JS实现Tab选项卡各种效果

  

两种jQuery实现选项卡功能的方法

  

JavaScript插件Tab选项卡详解

  以上就是微信小程序选项卡功能的开发的详细内容□◆,更多请关注久澳传媒编程栏目其它相关文章▽▽![平顶山seo公司皆选久澳]ps安装出现错误代码160怎么办

[石家庄seo公司就找久澳]微信小程序选项卡功能的开发

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。