技术小白之记录微信小程序底部导航栏
2018-09-27 21:18
447 查看
有了图片有了文字怎么能没有导航栏呢,所以下面来记录下底部导航栏的过程,先展示下我做的简易的导航栏图片。
可以在上面的图片中看到底部的包含“推荐”“反馈”的一个底部导航栏。制作导航栏只需要打开微信小程序app.json,向{}里填入下列代码:
"tabBar": { "color": "#a9b7b7", "selectedColor": "#1296db", "borderStyle": "black", "list": [ { "selectedIconPath": "img/tj.png", "iconPath": "img/tjw.png", "pagePath": "pages/recommend/recommend", "text": "推荐" }, { "selectedIconPath": "img/fk.png", "iconPath": "img/fkw.png", "pagePath": "pages/fb/fb", "text": "反馈" } ] }
先简易的解释下tabBar是表示“底部 tab 栏的表现”;
color—>tab 上的文字默认颜色;
selectedColor—>tab 上的文字选中时的颜色;
borderStyle—>tabbar上边框的颜色, 仅支持 black / white;
list—>tab 的列表,最少2个、最多5个 tab;
list包含的内容:
selectedIconPath—>选中时的图片路径,不支持网络图片。
iconPath—>图片路径,不支持网络图片。
pagePath—>页面路径,必须在 pages 中先定义。
text—>底部导航栏上的指示文字。
注:上述说的图片指的是导航栏上显示的小块图片,有个非常值得推荐的导航图片地址:http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
另外对于上述的tabBar功能可以在官网上看到更加详细的说明,
网站地址:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
相关文章推荐
- 技术小白之记录微信小程序顶部导航栏
- 微信小程序tabBar底部导航栏菜单详细介绍
- 微信小程序---底部固定导航栏tabBar
- 微信小程序之底部导航栏——tabBar
- 开发微信小程序(3)-全局配置app.json及底部导航栏实现
- 微信小程序-底部导航栏
- 小程序自学系列(零基础学小程序)---实现底部导航栏和顶部导航栏及微信开发工具常用快捷键
- 微信小程序之仿android fragment之可滑动的底部导航栏实例 —— 微信小程序实战系列(4)
- 微信小程序之底部导航栏(一)
- 微信小程序底部选项卡/导航栏实现方法
- 关于微信小程序动态改变底部导航栏问题
- 微信小程序实战之仿android fragment可滑动底部导航栏(4)
- 微信小程序如何实现底部导航栏
- 微信小程序监听scroll-view滑动到顶部、底部、左边、右边
- 微信小程序tabBar 不显示底部菜单的原因和解决方法
- 简单的自定义BottomBar-仿微信底部导航栏
- 微信小程序学习记录一: 参数的传递
- 微信小程序--部分内容记录(持续更新...)
- 微信小程序教程系列之设置标题栏和导航栏(7)