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. ABAP-增强-层级BOM-AB件业务

    目前新需求:整车A下挂有委外总成件B,总成件B和子件E是层级BOM,且采购类型均为F,信息记录类型均为寄售,按照现在标准MRP逻辑,只能计算第一层级子件需求,无法运行出子件E的需求. 1.实现方式 1 ...

  2. mysql 2003: Can't connect to MySQL server on '127.0.0.1:3306' (99)

    连接断开的频率太高导致报错,可以在每次连接之间sleep,或者保持一个长连接. ref:https://stackoverflow.com/questions/24884438/2003-cant-c ...

  3. Flume环境搭建_五种案例(转)

    Flume环境搭建_五种案例 http://flume.apache.org/FlumeUserGuide.html A simple example Here, we give an example ...

  4. sqlserver查询自定义的函数

    1)sp_helptext同样适应用自定义函数 2)sys.sql_modules表也可以查 查看函数的源代码: exec sp_helptext '函数名'

  5. ROC曲线和AUC值(转)

    http://www.cnblogs.com/dlml/p/4403482.html 分类器性能指标之ROC曲线.AUC值 一 roc曲线 1.roc曲线:接收者操作特征(receiveroperat ...

  6. python json5

    install pip install json5 test a.json: { 'a':'b', 'aa':['b1','b2']} =========================== impo ...

  7. bat cmd dos 通过拖拽参数 上传 截取拖拽上传文件名

    echo off setlocal enabledelayedexpansion :: L 小写 for /l %%i in (1,1,10000) do ( :con set /p a= selec ...

  8. Spring工作原理与单例

    最近看到spring管理的bean为单例的,当它与web容器整合的时候始终搞不太清除,就网上搜索写资料, Tomcat与多线程, servlet是多线程执行的,多线程是容器提供的能力. servlet ...

  9. 学习C++50条忠告

    1.把C++当成一门新的语言学习: 2.看<Thinking In C++>,不要看<C++变成死相>: 3.看<The C++ Programming Language ...

  10. Java的继承与接口

    为什么Java里面只允许单一继承,但允许实现多个接口? 1,为什么不能实现类的多继承?主要是防止多个类有相同的方法名,然而方法体不一样,子类就比较难选择了.所以java和C#不支持类的多继承2,允许具 ...