微信小程序实现了topBar底部选择栏的效果

本文的例子分享了微信小程序实现topBar底部选择栏的具体代码，供大家参考。具体内容如下

先看效果：底部分为三页，点击不同选项会跳转到对应的页面。

这是文件夹的结构

这分为三个页面，即索引、杜佳和信息

以下是代码：

app.json

{'pages': [//有几个页面，有几个' pages/dujia/dujia '，' pages/index/index '，' pages/info/info']绑定到页面。Window' : { '背景文字样式' : '深色'，' navigationbarbackgroundcolor ' : ' # df 3031 '，' navigationbar标题文字' :' topbar练习'，' navigationBarTextStyle': '白色' }，' tabBar ' : ' { ' color ' : ' # 000000 '，' selectedColor': '#DF3031 '，List ' :{ ' page path ' : ' pages/dujia/dujia '，' text' :' page 2 '，' iconpath' :' images/2.png '，' selectedicon path ' 3360 ' images/2 . png ' }，{ ' page path ' : ' pages/info/info '，' text ' : ' page 3 '，' icon path ' 3: ' images/3 . jpg '，' selectedicon path ' 3360 ' images/3 . jpg 'wxml文件就像我们网页设计中的html。

例如，我的索引页：

/view/over的第一页是本文的全部内容。希望对大家的学习有帮助，支持我们。