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