Applet WeChat qui implémente la fonction d'onglet

小云云
Libérer: 2018-05-15 14:15:30
original
2312 Les gens l'ont consulté

La navigation par onglets est une fonctionnalité d'Internet Explorer qui vous permet d'ouvrir plusieurs sites Web dans une seule fenêtre de navigateur. Vous pouvez ouvrir des pages Web dans de nouveaux onglets et basculer entre eux en cliquant sur l'onglet que vous souhaitez afficher. En utilisant la navigation par onglets, vous pouvez potentiellement réduire le nombre d'éléments affichés sur votre barre des tâches. Dans cet article, nous partagerons avec vous l'applet WeChat pour implémenter la fonction onglet.

Tout d'abord, jetez un œil à l'effet des onglets sur le mini programme WeChat :

Le principe est de le disposer en premier (cela ne Il n'est pas nécessaire de le dire), puis définissez le même événement de clic sur chaque onglet ci-dessus, puis liez un identifiant unique à chaque composant. Ensuite, lorsque l'événement de clic est déclenché, obtenez l'identifiant lié et déterminez de quel onglet il s'agit, puis déterminez quelle pièce doit être affichée ci-dessous ? Ajoutez maintenant le code :

wxml:

<view class="menu_box">
 <text class=&#39;menu1 {{menuTapCurrent=="0"?"borders":""}}&#39; data-current="0" catchtap="menuTap">menu1</text>
 <text class=&#39;menu2 {{menuTapCurrent=="1"?"borders":""}}&#39; data-current="1" catchtap="menuTap">menu2</text>
</view>
<view class="tab1" hidden="{{menuTapCurrent!=&#39;0&#39;}}">tab1</view>
<view class="tab2" hidden="{{menuTapCurrent!=&#39;1&#39;}}">tab2</view>
Copier après la connexion

wxss:

.menu_box{
 display: flex;
 height: 80rpx;
}
.menu1,.menu2{
 flex: 1;
 font-size:30rpx;
 line-height: 80rpx;
 text-align: center;
}
.borders{
 border-bottom: 4rpx solid #f00;
 color: #f00;
}
.tab1,.tab2{
 height: 300rpx;
 background: #23bff3;
}
.tab2{
 background: #ccc;
}
Copier après la connexion

JS:

 menuTap:function(e){
 var current=e.currentTarget.dataset.current;//获取到绑定的数据
 //改变menuTapCurrent的值为当前选中的menu所绑定的数据
 this.setData({
  menuTapCurrent:current
 });


 },
Copier après la connexion

Recommandations associées :

Fonction de service client automatique du robot mini programme WeChat

Mini programme WeChat-imitation Hema Fresh

Explication détaillée des composants vidéo, musique et image du mini-programme WeChat

Exemple de saisie de mot de passe dans le mini-programme WeChat

Exemples de projets de mini-programme WeChat les plus complets

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal