Example of how WeChat applet implements the non-swiper effect of the normal tab at the top-Mini Program Development-php.cn

Example of how WeChat applet implements the non-swiper effect of the normal tab at the top

黄舟

Release： 2017-09-12 09:24:13

Original

2408 people have browsed it

This article mainly introduces in detail the WeChat applet to achieve the effect of ordinary tabs at the top, which is not swiper, and has certain reference value. Interested friends can refer to it

Background: Some time ago I wrote a small program to grab red envelopes, which involved the top tab and pulled it out.

Rendering:

The code is directly below:

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>

Copy after login

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

Copy after login

js:

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

Copy after login

The above is the basic code of the implementation process, omitting the intermediate content code. The top number is recycled and can be set according to your actual needs.

The above is the detailed content of Example of how WeChat applet implements the non-swiper effect of the normal tab at the top. For more information, please follow other related articles on the PHP Chinese website!