微信小程序——顶部导航标题栏、底部选项卡
2019-03-01 17:40
393 查看
顶部导航标题、底部选项卡均写在app.json中
顶部导航
navigationBarBackgroundColor——顶部背景颜色
navigationBarTitleText——文字内容
navigationBarTitleText——文字颜色
"window":{ "backgroundTextStyle":"light", "color": "#fff", "navigationBarBackgroundColor": "#000", "navigationBarTitleText": "豆瓣电影", "navigationBarTextStyle":"white" },
底部选项卡
底部选项最少两个
color——文字默认颜色
selectedColor——文字选中时颜色
backgroundColor——底部背景颜色
pagePath——跳转到指定页面(路径为从最外面往里找)
text——文字内容
图片路径为从最外面往里找
iconPath——默认按钮图片
selectedIconPath——鼠标点击后图片
"tabBar": { "color": "#fff", "selectedColor": "#09bb07", "backgroundColor": "#000", "list": [ {"pagePath": "pages/index/index", "text": "当前热映", "iconPath": "icon/before/01.png", "selectedIconPath": "icon/after/01.png" }, { "pagePath": "pages/logs/logs", "text": "影院选择", "iconPath": "icon/before/02.png", "selectedIconPath": "icon/after/02.png" } ] }
相关文章推荐
- 微信小程序底部导航加顶部table选项卡
- 微信小程序开发之选项卡(窗口顶部/底部TabBar)页面切换
- 微信小程序设置底部导航栏目方法
- 微信小程序之四(设置底部导航)
- 微信小程序之顶部选项卡(swiper)
- 微信小程序前台开发——实现登录,底部导航栏,顶部导航栏(分类显示)
- 【Android UI设计与开发】第11期:顶部标题栏(二)ActionBar实现Tab选项卡和下拉导航列表
- 微信小程序实现顶部导航特效
- 微信小程序怎么设置底部导航
- 微信小程序开发之选项卡(窗口底部TabBar)页面切换
- 小程序自学系列(零基础学小程序)---实现底部导航栏和顶部导航栏及微信开发工具常用快捷键
- 微信小程序----导航栏选项卡(MUI顶部选项卡)
- 【Android UI设计与开发】第11期:顶部标题栏(二)ActionBar实现Tab选项卡和下拉导航列表
- 微信小程序实现底部导航栏目示例
- 微信小程序开发之选项卡(窗口顶部TabBar)页面切换
- 微信小程序tabbar底部导航
- 微信小程序实现底部导航
- 微信小程序之 Tabbar(底部选项卡)
- 微信小程序顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,
- 微信小程序tabBar底部导航中文注解api详解