1、新建一个微信小程序0607,完成后,大致架构如图。
2、打开app.json,在其中配置topbar,如图,红色部分表示的代码;注意:绿色处的逗号,不可省略。
3、上图代码运行后,即可看到添加的底部导航,如图。
4、在app.json中,再添加一个导航test,需要添加两端代码,如图中的代兄销胡码1和代码2,运行成功后,会在pages文件夹下出现test文件。
5、给添加图标,要使用 iconPath,selectedIconPath这两个属性。
6、运行后,出现底部导航图标,点击选中的显示√,羡拦如图。
7、如果不喜欢导航放在下面,可以改变position的值,将其斗掘放在最上端即可。
首页小程序导航栏TabBar设置
1、注意区分属性值大小写的区别哗禅春,比如selectedIconPath如果写成selectediconpath则图片不显示。
2、如果tabBar中设置"postion":"top"则icopath的图片都不再显示。
3、注意{}中如果列出几项,这除最后一项外每一项结尾加逗号,最后一项不用加。
"tabBar": {
"selectedColor": "#1296db",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/ico-home.png",
"selectedIconPath": "images/ico-home-d.png"
},{
"pagePath": "pages/setting/setting",
"text": "设置",
"iconPath": "images/ico-setting.png",
"selectedIconPath": "images/ico-setting-d.png"
},{
"pagePath": "pages/help/help",
"text": "帮助",
"乱耐iconPath": "images/ico-help.png",
"selectedIconPath": "images/ico-help-d.png"
}]
袭仿 }
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)