Exemple de la façon dont l'applet WeChat implémente l'effet non-swiper de l'onglet normal en haut

Cet article présente principalement en détail l'applet WeChat pour obtenir l'effet des onglets ordinaires en haut. Ce n'est pas un swiper et a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Contexte : il y a quelque temps. J'ai écrit un petit programme pour récupérer les enveloppes rouges, qui impliquait l'onglet supérieur et je l'ai retiré.

Rendu :

Le code est directement en dessous :

wxml :

<view class="navbar"> 
 <text wx:for="{{navbar}}" data-index="{{index}}" 
 class="item {{currentIndex==index?&#39;active&#39;:&#39;&#39;}}" 
 bindtap="navbarTab" wx:key="unique">{{item}}</text> 
 </view> 
 <view hidden="{{currentIndex!==0}}"> 

 </view> 
 <view hidden="{{currentIndex!==1}}"> 
 
 </view>

wxss:

.navbar{ 
 display: flex; 
 width: 100%; 
 flex-direction: row; 
 line-height: 80rpx; 
 position: fixed; 
 top: 0; 
} 
.navbar .item{ 
 flex: auto; 
 font-size: 30rpx; 
 text-align: center; 
 background: #fff; 
 font-weight: bold; 
} 
.navbar .item.active{ 
 color: #36DB2C; 
 position: relative; 
} 
.navbar .item.active::after{ 
 content: ""; 
 display: block; 
 position: absolute; 
 height: 4rpx; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 background: #36DB2C; 
}

js :

data: { 
 navbar: ["我发出的", "我收到的"], 
 currentIndex: 0,//tabbar索引 
 }, 
 navbarTab: function (e) { 
 this.setData({ 
  currentIndex: e.currentTarget.dataset.index 
 }); 
 },

Ce qui précède est le code de base du processus de mise en œuvre, éliminant le besoin de contenu intermédiaire. Le numéro supérieur est recyclé et peut être défini en fonction de vos besoins réels.

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!