Heim  >  Artikel  >  WeChat-Applet  >  Beispiel dafür, wie das WeChat-Applet den Non-Swiper-Effekt der normalen Registerkarte oben implementiert

Beispiel dafür, wie das WeChat-Applet den Non-Swiper-Effekt der normalen Registerkarte oben implementiert

黄舟
黄舟Original
2017-09-12 09:24:132410Durchsuche

Dieser Artikel stellt hauptsächlich das WeChat-Applet vor, um die Wirkung gewöhnlicher Tabs oben zu erzielen. Es ist kein Swiper und hat einen bestimmten Referenzwert.

Hintergrund: Vor einiger Zeit Ich habe ein kleines Programm geschrieben, um rote Umschläge zu greifen, indem ich die obere Lasche packte und sie herauszog.

Rendering:

Der Code ist direkt darunter:

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

Das Obige ist der Grundcode des Implementierungsprozesses, sodass keine Zwischeninhalte erforderlich sind. Die obere Zahl ist recycelt und kann entsprechend Ihren tatsächlichen Bedürfnissen eingestellt werden.


Das obige ist der detaillierte Inhalt vonBeispiel dafür, wie das WeChat-Applet den Non-Swiper-Effekt der normalen Registerkarte oben implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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