微信小程序实现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页⾯：

第⼀页

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。