700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序入门四: 导航栏样式 tabBar导航栏

微信小程序入门四: 导航栏样式 tabBar导航栏

时间:2020-11-15 21:48:11

相关推荐

微信小程序入门四: 导航栏样式 tabBar导航栏

实例内容

导航栏样式设置tabBar导航栏

实例一:导航栏样式设置

小程序的导航栏样式在app.json中定义。

这里设置导航,背景黑色,文字白色,文字内容测试小程序

app.json内容:

{"pages":["pages/index/index","pages/login/login","pages/logs/logs"],"window":{"backgroundTextStyle":"red","navigationBarBackgroundColor": "#000","navigationBarTitleText": "测试小程序","navigationBarTextStyle":"#fff"}}

window中的样式说明:

效果:

实例二:tabBar导航栏

tabBar挺好的,可以放置于顶部或者底部,用于不同功能页面的切换。

tabBar同样在app.json中进行定义,看一下我在app.json中对tabBar的相关定义:

"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"}]}

效果:

tabBar相关属性定义说明:

tabBar list定义说明:

tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

图标资源可以从这里获取:

博客名称:王乐平博客

博客地址:

CSDN博客地址:/lecepin

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。