Maison >Applet WeChat >Développement de mini-programmes >Exemple de la façon dont l'applet WeChat implémente l'effet non-swiper de l'onglet normal en haut

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

黄舟
黄舟original
2017-09-12 09:24:132435parcourir

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!

Déclaration:
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