Entwicklung der Tab-Funktion des WeChat-Miniprogramms

小云云
Freigeben: 2018-05-15 14:16:09
Original
3687 Leute haben es durchsucht

Dieser Artikel teilt Ihnen hauptsächlich die Entwicklung der Tab-Funktion des WeChat-Applets mit. Ich hoffe, er kann Ihnen helfen.

Erstellen Sie den Swipertab-Ordner in der Seitendatei

1. Schreiben Sie die Seitenstruktur: swipertab.wxml

<!--swipertab.wxml-->
<view class="swiper-tab">  
    <view class="swiper-tab-list {{currentTab==0 ? &#39;on&#39; : &#39;&#39;}}" data-current="0" bindtap="swichNav">tab一</view>  
    <view class="swiper-tab-list {{currentTab==1 ? &#39;on&#39; : &#39;&#39;}}" data-current="1" bindtap="swichNav">tab二</view>  
    <view class="swiper-tab-list {{currentTab==2 ? &#39;on&#39; : &#39;&#39;}}" 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>
Nach dem Login kopieren

2 .Daten festlegen: 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
			})
		}
	}
})
Nach dem Login kopieren

3. Stil festlegen: 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;  
}
Nach dem Login kopieren

4. Änderung des Headertitels: swipertab.json

{
    "navigationBarTitleText": "选项卡页面切换"
}
Nach dem Login kopieren

5. Rendering


Hinweis: Wegen des Dateinamens ist kein Index, also denken Sie daran, die Datei app.json zu ändern (Bemerkungen unten), sonst wird die Seite nicht angezeigt und unten wird nicht


Verwandte Empfehlungen:

Native JS realisiert verschiedene Effekte von Tab Tab

Zwei Arten von jQuery zur Realisierung der Tab-Funktion Methode

Detaillierte Erläuterung des JavaScript-Plug-Ins Tab

Das obige ist der detaillierte Inhalt vonEntwicklung der Tab-Funktion des WeChat-Miniprogramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!