Applet WeChat qui implémente la fonction d'onglet

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>

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

JS:

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


 },

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!