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

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!