這篇文章主要介紹了微信小程序怎么實現頂部普通選項卡非swiper效果，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯公司是專業(yè)的潮南網站建設公司，潮南接單;提供成都網站建設、成都網站制作,網頁設計,網站設計,建網站,PHP網站建設等專業(yè)做網站服務;采用PHP框架,可快速的進行潮南網站開發(fā)網頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網站,專業(yè)的做網站團隊,希望更多企業(yè)前來合作!

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

效果圖：

下面直接上代碼:

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: ["我發(fā)出的", "我收到的"], 
 currentIndex: 0,//tabbar索引 
 }, 
 navbarTab: function (e) { 
 this.setData({ 
  currentIndex: e.currentTarget.dataset.index 
 }); 
 },

感謝你能夠認真閱讀完這篇文章，希望小編分享微信小程序怎么實現頂部普通選項卡非swiper效果內容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯網站建設公司，，關注創(chuàng)新互聯行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯網站建設公司，，詳細的解決方法等著你來學習!

當前標題：微信小程序怎么實現頂部普通選項卡非swiper效果-創(chuàng)新互聯
地址分享：http://aaarwkj.com/article12/cdphdc.html

成都網站建設公司_創(chuàng)新互聯，為您提供App設計、外貿網站建設、網站建設、全網營銷推廣、網頁設計公司、小程序開發(fā)

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯