微信小程序開發(fā)之頂部導(dǎo)航欄實(shí)例代碼

更新時(shí)間：2017年02月23日 15:55:42 投稿：lqh

這篇文章主要介紹了微信小程序開發(fā)之頂部導(dǎo)航欄實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下

微信小程序開發(fā)之頂部導(dǎo)航欄

需求：頂部導(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> 
 
<!--首頁(yè)--> 
<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: ['首頁(yè)', '搜索', '我'], 
  currentTab: 0 
 }, 
 navbarTap: function(e){ 
  this.setData({ 
   currentTab: e.currentTarget.dataset.idx 
  }) 
 } 
})

運(yùn)行：

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

javascript進(jìn)階篇深拷貝實(shí)現(xiàn)的四種方式
這篇文章主要為大家介紹了javascript進(jìn)階篇深拷貝實(shí)現(xiàn)的四種方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
JS前端設(shè)計(jì)模式之發(fā)布訂閱模式詳解
這篇文章主要為大家介紹了JS前端設(shè)計(jì)模式之發(fā)布訂閱模式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
'2'>'10'==true?解析JS如何進(jìn)行隱式類型轉(zhuǎn)換
這篇文章主要為大家介紹了'2'>'10'==true?解析JS如何進(jìn)行隱式類型轉(zhuǎn)換示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09
JS前端模擬Excel條件格式實(shí)現(xiàn)數(shù)據(jù)條效果
這篇文章主要為大家介紹了JS前端模擬Excel條件格式實(shí)現(xiàn)數(shù)據(jù)條效果，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
webpack5之devServer的常用配置詳解
這篇文章主要為大家介紹了webpack5之devServer的常用配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
JavaScript文檔對(duì)象模型DOM
這篇文章主要介紹了JavaScript文檔對(duì)象模型DOM，當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型，通過(guò)可編程的對(duì)象模型，JavaScript 獲得了足夠的能力來(lái)創(chuàng)建動(dòng)態(tài)的 HTML。下面來(lái)看看文章得詳細(xì)內(nèi)容,需要的朋友可以參考一下
2021-11-11
一文解析Express框架view對(duì)象使用
這篇文章主要介紹了Express框架view對(duì)象使用解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
利用javaScript處理常用事件詳解
這篇文章主要介紹了利用javaScript處理常用事件詳解,文章有非常詳細(xì)的代碼實(shí)踐,對(duì)學(xué)習(xí)js的小伙伴們有一定的參考價(jià)值,需要的朋友可以參考下
2021-04-04
微信小程序 http請(qǐng)求詳細(xì)介紹
這篇文章主要介紹了微信小程序 http請(qǐng)求詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下
2016-10-10
微信小程序設(shè)置啟動(dòng)頁(yè)面的兩種方法
這篇文章主要介紹了微信小程序設(shè)置啟動(dòng)頁(yè)面的方法的相關(guān)資料,這里對(duì)設(shè)置啟動(dòng)頁(yè)面的兩種方法分別介紹，需要的朋友可以參考下
2017-03-03