激情综合在线观看,亚洲天堂网站在线,黄色a级片免费

導讀微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一...

微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一項門檻非常高的創新，經過將近兩年的發展，已經構造了新的小程序開發環境和開發者生態。

這篇文章主要為大家詳細介紹了微信小程序實現頂部普通選項卡效果，非swiper，具有一定的參考價值，感興趣的小伙伴們可以參考一下

背景：前段時間寫了一個搶紅包小程序，里面涉及到了頂部選項卡，把它抽了出來。

效果圖：

微信小程序如何實現頂部普通選項卡非swiper效果的實例

下面直接上代碼:

wxml:

<view class="navbar"> 
 <text wx:for="{{navbar}}" data-index="{{index}}" 
 class="item {{currentIndex==index?'active':''}}" 
 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 
 }); 
 },

以上是實現過程基本代碼，省去了中間內容的代碼。頂部個數是循環出來的，可以根據自己的實際需求設置。

以上就是微信小程序如何實現頂部普通選項卡非swiper效果的實例的詳細內容，更多請關注php中文網其它相關文章！

小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。

溫馨提示：喜歡本站的話，請收藏一下本站！

當前位置:雨林木風下載站 > 應用軟件教程 > 詳細頁面

微信小程序如何完成頂部普通選項卡非swiper效果的案例

本類教程下載

系統下載排行