本文实例为大家分享了微信小程序实现topBar底部选择栏的具体代码,供大家参考,具体内容如下
先看一下效果:底部分为三个页面,点击不同的选项就会跳转到相对应的页面去。

下面是文件夹的结构

这个分为三个页面,分别是 index,dujia,Info
下面是代码:
app.json
{
"pages": [//有几个页面,pages里面就要绑定几个
"pages/dujia/dujia",
"pages/index/index",
"pages/info/info"
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#DF3031",
"navigationBar Text": "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"
}
]
}
}
其他的页面都写在对应文件夹的.w 文件里面。.w 文件就想当于我们网页设计中的 html一样。
例如我的index页面:
<view> 第一页 </view>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
上一篇 :
Q3财报再看小米:继续奔跑在硬件公司道路上
下一篇 :
微软、谷歌开打持久战,亚马逊云能否继续一家独大?
-
【NLP实战】快速掌握常用的向量空间模型
2026-05-16栏目: 教程
-
腾讯云服务器Linux系统--安装Kafka
2026-05-16栏目: 教程
-
linux系统下,开启mysql的binlog日志
2026-05-16栏目: 教程
-
Firefox Private Network使用方法(极详细)
2026-05-16栏目: 教程
-
算法:深度、广度优先搜索算法与剪枝-理论
2026-05-16栏目: 教程
