微信小程序?qū)崙?zhàn)之頂部導(dǎo)航欄(選項(xiàng)卡)(1)

更新時(shí)間：2022年04月07日 12:39:58 作者：michael_ouyang

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)之頂部導(dǎo)航欄的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序頂部導(dǎo)航欄的具體代碼，供大家參考，具體內(nèi)容如下

需求：頂部導(dǎo)航欄

效果圖：

wxml：

<!--導(dǎo)航條--> 
<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 
 }) 
 } 
})

運(yùn)行：

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊兩個(gè)精彩的專題：javascript選項(xiàng)卡操作方法匯總 jquery選項(xiàng)卡操作方法匯總

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

有一段有意思的代碼-javascript現(xiàn)實(shí)多行信息
有一段有意思的代碼-javascript現(xiàn)實(shí)多行信息...
2007-08-08
js?實(shí)現(xiàn)picker?選擇器示例詳解
這篇文章主要為大家介紹了js?實(shí)現(xiàn)picker?選擇器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
Element Plus UI 組件庫中 mt-x 類詳解
在ElementPlusUI組件庫中,mt-x類用于設(shè)置元素的外邊距,其中"mt"代表"margin-top",x表示外邊距的大小,這種類名的使用可以快速調(diào)整元素的頂部外邊距,簡化樣式管理,確保設(shè)計(jì)的一致性,本文給大家介紹Element Plus UI 組件庫中 mt-x 類基本知識(shí),感興趣的朋友一起看看吧
2024-11-11
原生js實(shí)現(xiàn)jquery函數(shù)animate()動(dòng)畫效果的簡單實(shí)例
下面小編就為大家?guī)硪黄鷍s實(shí)現(xiàn)jquery函數(shù)animate()動(dòng)畫效果的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
JavaScript簡單實(shí)現(xiàn)鼠標(biāo)拖動(dòng)選擇功能
本篇文章主要是對(duì)JavaScript簡單實(shí)現(xiàn)鼠標(biāo)拖動(dòng)選擇功能的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-03-03
JavaScript實(shí)現(xiàn)簡單的計(jì)算器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01
Web網(wǎng)站都變成灰色有哪些方法可以快速實(shí)現(xiàn)(解決方案)
有些時(shí)候我們需要把網(wǎng)站頁面變成黑白色或灰色，特別是對(duì)于一些需要悼念的日子，以及一些影響力很大的偉人逝世或紀(jì)念日的時(shí)候，都會(huì)讓網(wǎng)站的全部網(wǎng)頁變成灰色（黑白色），以表示我們對(duì)逝者或者英雄的緬懷和悼念
2022-12-12
基于leaflet.js實(shí)現(xiàn)修改地圖主題樣式的流程分析
這篇文章主要介紹了基于leaflet.js實(shí)現(xiàn)修改地圖主題樣式的流程，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-05-05
修復(fù)bash漏洞的shell腳本分享
這篇文章主要介紹了修復(fù)bash漏洞的shell腳本分享,本文腳本適應(yīng)常見的linux服務(wù)器系統(tǒng),如CentOS、Debian、Ubuntu、OpenSuSE、Aliyun等系統(tǒng),需要的朋友可以參考下
2014-12-12
Javascript在IE或Firefox下獲取鼠標(biāo)位置的代碼
由于Firefox和IE等瀏覽器之間對(duì)JS解釋的方式不一樣，F(xiàn)irefox下面獲取鼠標(biāo)位置不能夠直接使用clientX來獲取。網(wǎng)上說的一般都是觸發(fā)mousemove事件才行。我這里有兩段代碼，思路都一樣，就是風(fēng)格不同。
2009-12-12