溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了微信小程序實現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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
