微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果
更新時間：2018年07月20日 10:24:00 作者：RataYou
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)topBar底部選擇欄的具體代碼，供大家參考，具體內(nèi)容如下
先看一下效果：底部分為三個頁面，點擊不同的選項就會跳轉(zhuǎn)到相對應(yīng)的頁面去。
下面是文件夾的結(jié)構(gòu)
這個分為三個頁面，分別是 index，dujia，Info
下面是代碼：
app.json
{
"pages": [//有幾個頁面，pages里面就要綁定幾個
"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"
}
]
}
}
其他的頁面都寫在對應(yīng)文件夾的.wxml文件里面。.wxml文件就想當(dāng)于我們網(wǎng)頁設(shè)計中的 html一樣。
例如我的index頁面：
<view> 第一頁 </view>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap 填充Json數(shù)據(jù)的實例代碼
本篇文章主要介紹了Bootstrap 填充Json數(shù)據(jù)的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
bootstrap3-dialog-master模態(tài)框使用詳解
這篇文章主要為大家詳細介紹了bootstrap3-dialog-master模態(tài)框的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
JavaScript訪問本地文件夾的幾種實現(xiàn)方法
由于安全限制無法直接訪問用戶的本地文件或文件夾,本文主要介紹了JavaScript訪問本地文件夾的幾種實現(xiàn)方法,具有一定的參考價值,感興趣的可以了解一下2024-06-06
JavaScript實現(xiàn)iframe自動高度調(diào)整和不同主域名跨域
這篇文章主要介紹了JavaScript實現(xiàn)iframe自動高度調(diào)整和不同主域名跨域,作者通過建立一個代理來同步高度調(diào)整,需要的朋友可以參考下2016-02-02
基于layui內(nèi)置模塊(element常用元素的操作)
今天小編就為大家分享一篇基于layui內(nèi)置模塊(element常用元素的操作)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)banner圖輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
js 與或運算符 || && 妙用，可用于精簡代碼，降低程序的可讀性。2009-12-12
因業(yè)務(wù)需要，在網(wǎng)上查找這個問題的解決辦法，但是昏天黑地地搞了半天，找到的方法雖然可以實現(xiàn)功能，但是總是會跳出討厭的“關(guān)閉窗口”的提示框，郁悶。2009-01-01
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)倒計時60s獲取驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
匹配html標(biāo)記的正則...2006-07-07