1,底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图。

2,对于底部导航栏,小程序上给出的文档要求里面的item最少2个,最多五个。

3,在项目中找到app.json这个文件

{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/mine/mine" ],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "首页",
"navigationBarTextStyle":"black"
}, "tabBar": {
"color": "#a9b7b7",
"selectedColor": "#11cd6e",
"borderStyle": "black" ,
"list": [{
"selectedIconPath": "images/icon_consult_press.png",
"iconPath": "images/icon_consult.png",
"pagePath": "pages/index/index",
"text": "首页"
}, {
"selectedIconPath": "images/icon_invest_press.png",
"iconPath": "images/icon_invest.png",
"pagePath": "pages/logs/logs",
"text": "一元投"
},{
"selectedIconPath": "images/icon_mine_press.png",
"iconPath": "images/icon_mine.png",
"pagePath": "pages/mine/mine",
"text": "我的"
}
]
}
}

这里我先解释一下这些属性是什么意思:

tabBar  指底部的 导航配置属性

color  未选择时 底部导航文字的颜色

selectedColor  选择时 底部导航文字的颜色

borderStyle  底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条)

list   导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text  导航图标下方文字

这里需要注意一些小问题:

1、每个页面的json文件都不能去掉navigationBarTitleText这个属性。否则会报错

2、

 "pages":[
3 "pages/index/index",
4 "pages/logs/logs",
5 "pages/mine/mine"
6
7 ],
这个页面的注册一定要注意,第一个一定是要是最先显示的,否则会出现底部导航看不到。

微信小程序底部导航Tabbar的更多相关文章

  1. 微信小程序底部导航栏部署

    在微信小程序开发app.json(app.json它是定义全局页面) 只是用来部署微信底部的图标,最多不能大于五个 "tabBar":{ "selectedColor&q ...

  2. 微信小程序底部导航栏(tabbar)

    在app.json处设置“tabBar”,例子如下: { "pages": [ "pages/index/index", "pages/pages1/ ...

  3. 微信小程序把玩(三)tabBar底部导航

    原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 ...

  4. 小程序 - 底部导航栏“tabBar”

    小程序底部导航 1.app.json页面配置: { "pages": [ "pages/movie/movie", "pages/cinema/cin ...

  5. 微信小程序底部实现自定义动态Tabbar

    多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...

  6. 获取不同机型微信小程序状态栏+导航栏高度

    获取不同机型微信小程序状态栏+导航栏高度 一. 前言 很多时候我们开发微信小程序,都需要先知道状态栏和导航栏的高度,才能去做其他功能 二. 获取微信小程序状态栏高度 用wx.getSystemInfo ...

  7. 微信小程序——自定义导航栏

    微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...

  8. 微信小程序开发过程中tabbar页面显示的相关问题及解决办法!

    在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰.为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示ta ...

  9. 微信小程序底部菜单栏的使用方法

    1.找到项目根目录的配置文件 app.json,在配置文件中加入配置代码.例如: "tabBar": { <!--底部的导航配置属性--> "color&qu ...

随机推荐

  1. 删除数据恢复数据语句 Oracle

    SELECT * FROM TBL_DZYJ_GEORELICSINFO AS OF TIMESTAMP TO_TIMESTAMP('2017-5-8 9:00:00','YYYY-MM-DD HH: ...

  2. mydumper使用

    一.下载安装,打开https://launchpad.net/mydumper #wget https://launchpadlibrarian.net/185032423/mydumper-0.6. ...

  3. struts2 模拟令牌机制防止表单重复提交

    web.xml: <?xml version="1.0" encoding="UTF-8"?><web-app version="3 ...

  4. js indexOf within Switch

    https://stackoverflow.com/questions/22277447/indexof-within-switch switch (true) { case (msgRes.inde ...

  5. 好用的模板引擎NVelocity

    CastleNVelocity-1.1.1,使用方法: 把dll放到项目中,添加引用,修改配置的文件夹以及数据模型,最后在逻辑代码中调用即可. 封装到CommonHelper.cs using Sys ...

  6. C#中如何创建xml文件 增、删、改、查 xml节点信息

    XML:Extensible Markup Language(可扩展标记语言)的缩写,是用来定义其它语言的一种元语言,其前身是SGML(Standard Generalized Markup Lang ...

  7. sublime Text与python3的中文编码错误解决办法

    在 linux服务器上运行代码报错: Python3中遇到UnicodeEncodeError: ‘ascii’ codec can’t encode characters in ordinal no ...

  8. Cairo编程

    一.简介 cairo 是一个免费的矢量绘图软件库,它可以绘制多种输出格式.cairo 支持许多平台,包括 Linux.BSD.Microsoft® Windows® 和 OSX(BeOS 和 OS2 ...

  9. Bug:src/lxml/lxml.etree.c:84:20: 致命错误:Python.h:没有那个文件或目录

    问题描述: pip批量安装软件包时,出现如上题目错误,卡在了lxm依赖于python中的python-devel 问题原因: 缺失python-devel开发包所导致,python.h存在于pytho ...

  10. HDU 4499.Cannon 搜索

    Cannon Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Subm ...