微信小程序如何實(shí)現(xiàn)頂部普通選項(xiàng)卡效果

發(fā)布時(shí)間：2020-06-23 09:44:33 來源：億速云閱讀：246 作者：清晨欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序如何實(shí)現(xiàn)頂部普通選項(xiàng)卡效果，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

背景：前段時(shí)間寫了一個(gè)搶紅包小程序，里面涉及到了頂部選項(xiàng)卡，把它抽了出來。

效果圖：

下面直接上代碼:

wxml:

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

關(guān)于微信小程序如何實(shí)現(xiàn)頂部普通選項(xiàng)卡效果就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

微信小程序如何實(shí)現(xiàn)頂部普通選項(xiàng)卡效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽