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. Python之建立APP流程以及SVN 的使用

    一, 1)我们先拿到SVN的地址比如说:https://123.com/trunck/nihao 2)执行命令行 svn checkout 此时check out是将项目存到了本地根目录下面,如果想存 ...

  2. linux 安装禅道

    1. 查看Linux服务器版本信息 # cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) 2. 禅道开源版安装包下载 # wge ...

  3. Java时间操作常用api

    - 如何取得年月日.小时分钟秒?- 如何取得从1970年1月1日0时0分0秒到现在的毫秒数?- 如何取得某月的最后一天?- 如何格式化日期?答:问题1:创建java.util.Calendar 实例, ...

  4. __builtin__与__builtins__的区别与关系

    在学习Python时,很多人会问到__builtin__.__builtins__和builtins之间有什么关系.百度或Google一下,有很 多答案,但是这些答案要么不准确,要么只说了一点点,并不 ...

  5. iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 规范与部署

    沪江CCtalk视频地址:https://www.cctalk.com/v/15114923889450 规范与部署 懒人推动社会进步. 本篇中,我们会讲述三个知识点 定制书写规范 开发环境运行 如何 ...

  6. nodejs文件操作笔记

    nodejs添加了流的概念,通过流操作文件如行云流水,比早前便利畅快多了. 先来第一个例子,我们建一个stream.js文件,里面内容如下: var fs = require("fs&quo ...

  7. hibernate中.常见的hql查询语句

    hql是非常有意识的被设计为完全面向对象的查询 基本规则: 1.hql语法类似于sql,但它后面跟的不是表名和字段名,而是类名和属性名 2.hql大小写不敏感.但是设计java类名,包名,属性名时大小 ...

  8. Eclipse编辑jsp不显示预览效果页面

    转载链接:https://blog.csdn.net/fishsr/article/details/22662787 转载 2014年03月31日 13:35:35 1.Eclipse打开jsp后,在 ...

  9. seleniumIDE的实践

    浏览器:1.Firefox setup35.0.12.安装完成后设置菜单栏---安装完浏览器,鼠标定位在浏览器的状态栏,然后点击鼠标右键,点击勾选菜单栏,这时候就有菜单栏出现了 3.关闭浏览器自动更新 ...

  10. ValueError: update only works with $ operators

    问题:在执行pymongo的update语句时,提示了ValueError: update only works with $ operators 脚本:db.user.update_one({&qu ...