微信小程序?qū)崙?zhàn)之頂部導航欄(選項卡)(1)
更新時間：2022年04月07日 12:39:58 作者：michael_ouyang
這篇文章主要為大家詳細介紹了微信小程序?qū)崙?zhàn)之頂部導航欄的相關(guān)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序頂部導航欄的具體代碼，供大家參考，具體內(nèi)容如下
需求：頂部導航欄
效果圖：
wxml：
<!--導航條-->
<view class="navbar">
<text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
</view>
<!--首頁-->
<view hidden="{{currentTab!==0}}">
tab_01
</view>
<!--搜索-->
<view hidden="{{currentTab!==1}}">
tab_02
</view>
<!--我-->
<view hidden="{{currentTab!==2}}">
tab_03
</view> wxss：
page{
display: flex;
flex-direction: column;
height: 100%;
}
.navbar{
flex: none;
display: flex;
background: #fff;
}
.navbar .item{
position: relative;
flex: auto;
text-align: center;
line-height: 80rpx;
}
.navbar .item.active{
color: #FFCC00;
}
.navbar .item.active:after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4rpx;
background: #FFCC00;
} js：
var app = getApp()
Page({
data: {
navbar: ['首頁', '搜索', '我'],
currentTab: 0
},
navbarTap: function(e){
this.setData({
currentTab: e.currentTarget.dataset.idx
})
}
})
運行：
如果大家還想深入學習，可以點擊兩個精彩的專題：javascript選項卡操作方法匯總 jquery選項卡操作方法匯總
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
有一段有意思的代碼-javascript現(xiàn)實多行信息
有一段有意思的代碼-javascript現(xiàn)實多行信息...2007-08-08
這篇文章主要為大家介紹了js?實現(xiàn)picker?選擇器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
在ElementPlusUI組件庫中,mt-x類用于設(shè)置元素的外邊距,其中"mt"代表"margin-top",x表示外邊距的大小,這種類名的使用可以快速調(diào)整元素的頂部外邊距,簡化樣式管理,確保設(shè)計的一致性,本文給大家介紹Element Plus UI 組件庫中 mt-x 類基本知識,感興趣的朋友一起看看吧2024-11-11
原生js實現(xiàn)jquery函數(shù)animate()動畫效果的簡單實例
下面小編就為大家?guī)硪黄鷍s實現(xiàn)jquery函數(shù)animate()動畫效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
本篇文章主要是對JavaScript簡單實現(xiàn)鼠標拖動選擇功能的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單的計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
Web網(wǎng)站都變成灰色有哪些方法可以快速實現(xiàn)(解決方案)
有些時候我們需要把網(wǎng)站頁面變成黑白色或灰色，特別是對于一些需要悼念的日子，以及一些影響力很大的偉人逝世或紀念日的時候，都會讓網(wǎng)站的全部網(wǎng)頁變成灰色（黑白色），以表示我們對逝者或者英雄的緬懷和悼念2022-12-12
基于leaflet.js實現(xiàn)修改地圖主題樣式的流程分析
這篇文章主要介紹了基于leaflet.js實現(xiàn)修改地圖主題樣式的流程，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了修復bash漏洞的shell腳本分享,本文腳本適應常見的linux服務器系統(tǒng),如CentOS、Debian、Ubuntu、OpenSuSE、Aliyun等系統(tǒng),需要的朋友可以參考下2014-12-12
Javascript在IE或Firefox下獲取鼠標位置的代碼
由于Firefox和IE等瀏覽器之間對JS解釋的方式不一樣，F(xiàn)irefox下面獲取鼠標位置不能夠直接使用clientX來獲取。網(wǎng)上說的一般都是觸發(fā)mousemove事件才行。我這里有兩段代碼，思路都一樣，就是風格不同。2009-12-12