微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果
更新時(shí)間：2018年07月20日 10:24:00 作者：RataYou
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)topBar底部選擇欄的具體代碼，供大家參考，具體內(nèi)容如下
先看一下效果：底部分為三個(gè)頁面，點(diǎn)擊不同的選項(xiàng)就會(huì)跳轉(zhuǎn)到相對(duì)應(yīng)的頁面去。
下面是文件夾的結(jié)構(gòu)
這個(gè)分為三個(gè)頁面，分別是 index，dujia，Info
下面是代碼：
app.json
{
"pages": [//有幾個(gè)頁面，pages里面就要綁定幾個(gè)
"pages/dujia/dujia",
"pages/index/index",
"pages/info/info"
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#DF3031",
"navigationBarTitleText": "topBar練習(xí)",
"navigationBarTextStyle": "white"
},
"tabBar": {
"color": "#000000",
"selectedColor": "#DF3031",
"list": [
{
"pagePath": "pages/index/index",
"text": "第一頁",
"iconPath": "images/1.png",
"selectedIconPath": "images/1.png"
},
{
"pagePath": "pages/dujia/dujia",
"text": "第二頁",
"iconPath": "images/2.png",
"selectedIconPath": "images/2.png"
},
{
"pagePath": "pages/info/info",
"text": "第三頁",
"iconPath": "images/3.jpg",
"selectedIconPath": "images/3.jpg"
}
]
}
}
其他的頁面都寫在對(duì)應(yīng)文件夾的.wxml文件里面。.wxml文件就想當(dāng)于我們網(wǎng)頁設(shè)計(jì)中的 html一樣。
例如我的index頁面：
<view> 第一頁 </view>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本章主要介紹通過JavaScript讀取圖片的例子，本例子不包含服務(wù)器端后臺(tái)代碼，只包含前臺(tái)頁面代碼，所以直接用Html文件就可以，代碼如下，因?yàn)榘敿?xì)的注意，所以不再詳細(xì)說明了，如果有看不明白的，可以給我留言，我給大家具體答復(fù)。2009-11-11
JS實(shí)現(xiàn)圖片的不間斷連續(xù)滾動(dòng)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄狫S實(shí)現(xiàn)圖片的不間斷連續(xù)滾動(dòng)的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
JavaScript實(shí)現(xiàn)彈窗效果代碼分析
本文主要介紹了JavaScript實(shí)現(xiàn)彈窗效果的代碼分析，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了JavaScript中的值類型轉(zhuǎn)換介紹,本文講解了值類型轉(zhuǎn)換規(guī)則、值類型轉(zhuǎn)換與比較、顯式類型轉(zhuǎn)換、對(duì)類型自動(dòng)轉(zhuǎn)換的使用等內(nèi)容,需要的朋友可以參考下2014-12-12
學(xué)習(xí)JavaScript事件流和事件處理程序
這篇文章主要為大家介紹了學(xué)習(xí)JavaScript事件流和事件處理程序的注意事項(xiàng)，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)消息框示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
下面介紹JavaScript中的數(shù)組對(duì)象遍歷、讀寫、排序等操作以及與數(shù)組相關(guān)的字符串處理操作，需要的的朋友參考下吧2017-09-09
JavaScript通過字符串調(diào)用函數(shù)的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript通過字符串調(diào)用函數(shù)的實(shí)現(xiàn)方法,實(shí)例分析了javascript動(dòng)態(tài)調(diào)用函數(shù)的技巧,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)圖片局部放大鏡效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
JavaScript實(shí)現(xiàn)簡(jiǎn)單驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08