微信小程序最多能加5个导航图标。因为我们只有两个默认页面,这里我们就添加两个导航图标

先看我们要达到的就是这么一个效果

接下来开始实践:

(1)准备工作

找几个图标,将上述起好名字的图标 保存到 小程序项目目录中 新创建的images 文件夹中,准备工作就做好了,项目目录如下

(二)更改配置文件

每个小程序页面都是由四个文件组成(json、WXML、wxss、js)。

app.js 为整个小程序的入口文件,app.json 为整个小程序的全局配置文件,app.wxss 为全局样式文件。

我们找到项目根目录中的配置文件 app.json 加入如下配置信息

app.json 文件如下:

"tabBar": {
"color": "#858585",
"selectedColor": "#000000",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/images/user.png",
"selectedIconPath": "/images/user.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "/images/star.png",
"selectedIconPath": "/images/happy.png"
}
]
}

保存 编译 就可以看到上面的效果了。

主要了解下对应属性信息

对应的属性信息

  tabBar 指底部的 导航配置属性,就是是配置底部两个菜单的

window 是配置整个小程序窗口风格的;

  pages 是整个小程序的页面路径;

  project.config.json 为项目配置文件;

  pages/ 下面为具体的页了,比如 index 代表首页,其由四个文件组成,json 文件为可选文件,可有可无。

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

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

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

  list 导航配置数组

  selectedIconPath 选中时 图标路径

  iconPath 未选择时 图标路径

  pagePath 页面访问地址

  text 导航图标下方文字

  如果要改变更详细的样式 请参看

  https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

最后看看效果图

微信小程序从入门到实践(一)-设置底部导航栏的更多相关文章

  1. 微信小程序从零开始开发步骤(三)底部导航栏

    上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...

  2. 微信小程序开发入门与实践

    基础知识---- MINA 框架 为方便微信小程序开发,微信为小程序提供了 MINA 框架,这套框架集成了大量的原生组件以及 API.通过这套框架,我们可以方便快捷的完成相关的小程序开发工作. MIN ...

  3. 微信小程序tab切换,可滑动切换,导航栏跟随滚动实现

    简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...

  4. 微信小程序初使心得【微信小程序快速入门】

    摘要: 2016年推出微信小程序,时至今日,历经几个版本的更新,已形成了相对实用和稳定的服务平台.本文简单的介绍了微信小程序的入门用法,今后会继续关注和实践. 2016年推出微信小程序,时至今日,历经 ...

  5. 微信小程序开发入门教程

    做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先 ...

  6. 微信小程序开发环境安装以及相关设置配置

    微信小程序开发环境安装以及相关设置配置 一.安装 软件名称:wechat_devtools_1.02.1907232_x64 软件安装地址:https://developers.weixin.qq.c ...

  7. 原创:从零开始,微信小程序新手入门宝典《一》

    为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习:一:微信小程序的特点张小龙:张小龙全面阐述小程序,推荐通读此文: 小程序是一种不需要下载.安装即可使用的 ...

  8. 利用WordPress REST API 开发微信小程序从入门到放弃

    自从我发布并开源WordPress版微信小程序以来,很多WordPress网站的站长问有关程序开发的问题,其实在文章:<用微信小程序连接WordPress网站>讲述过一些基本的要点,不过仍 ...

  9. 微信小程序开发入门(一)

     小程序学习入门--(一) 最近自己学习微信小程序的过程当中自己总结出来的知识点,我会不断地更新和完善! 小程序的开发工具 一台电脑 熟悉HTML.CSS.JS基本语法 开发工具: 微信web开发者工 ...

随机推荐

  1. RegisterClass/RegisterClassEx -- 注册窗口类

    (1)函数原型 1 //RegisterClass 2 ATOM RegisterClass( 3 const WNDCLASS * lpWndClass //Long pointer to a WN ...

  2. eladmin-plus V2.0.0 发布,单表链式调用更丝滑

    一.项目简介 eladmin的mybatis-plus版本,单表使用链式调用,代码更简洁,调用更便捷.目前更新到2021年7月.项目基于 Spring Boot 2.4.2 . Mybatis-plu ...

  3. 这个大表走索引字段查询的 SQL 怎么就成全扫描了,我TM人傻了

    今天收到运营同学的一个 SQL,有点复杂,尤其是这个 SQL explain 都很长时间执行不出来,于是我们后台团队帮忙解决这个 SQL 问题,却正好发现了一个隐藏很深的线上问题. select a. ...

  4. Netty基础招式——ChannelHandler的最佳实践

    本文是Netty系列第7篇 上一篇文章我们深入学习了Netty逻辑架构中的核心组件EventLoop和EventLoopGroup,掌握了Netty的线程模型,并且介绍了Netty4线程模型中的无锁串 ...

  5. .net 知新:【4】NuGet简介和使用

    在包管理以前我们在项目中引用第三方包通常是去下载dll放到项目中再引用,后来逐渐发展成各种包管理工具,nuget就是一种工具,适用于任何现代开发平台的基本工具可充当一种机制,通过这种机制,开发人员可以 ...

  6. UVa120 煎饼(选择排序思想)

    题目背景 给你一迭薄煎饼,请你写一个程式来指出要如何安排才能使这些薄煎饼由上到下依薄煎饼的半径由小到大排好.所有的薄煎饼半径均不相同. 要把薄煎饼排好序需要对这些薄煎饼做翻面(flip)的动作.方法是 ...

  7. linux c语言学习笔记之守护进程

    哈尔滨理工大学软件工程专业08-7李万鹏原创作品,转载请标明出处 http://blog.csdn.net/woshixingaaa/archive/2010/06/06/5651095.aspx 守 ...

  8. Socket通信-服务端

    WSADATA wsd; SOCKET sClient; SOCKET sServer; SOCKADDR_IN addrServ; char chRcvBuf[RECV_BUF_SIZE]; if ...

  9. Goland 这些技巧,学会开发效率翻倍!

    hi, 大家好,我是 hhf. <Goland 这些实操技巧,你可能还不会!>介绍了日常开发中一些比较好用的技巧.本篇文章继续介绍一些其他比较好用的技巧. 自定义结构 tag Goland ...

  10. Spring学习01(IOC)

    1.Spring概述 简介 2002年,Rod Jahnson首次推出了Spring框架雏形interface21框架. 2004年3月24日,Spring框架以interface21框架为基础,经过 ...