在app.json处设置“tabBar”,例子如下:

{
"pages": [
"pages/index/index",
"pages/pages1/pages1",
"pages/pages2/pages2"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTitleText": "小程序名称",
"navigationBarTextStyle": "black",
"backgroundColor": "#EA0000"
},
"sitemapLocation": "sitemap.json",
"tabBar": {
"color": "#666666",
"selectedColor": "#f10b2e",
"list": [
{
"pagePath": "pages/pages1/pages1",
"text": "页面1",
"iconPath": "*****",//未选中时的图标
"selectedIconPath": "*****"//选中后的图标
},
{
"pagePath": "pages/pages2/pages2",
"text": "页面2",
"iconPath": "*****",//未选中时的图标
"selectedIconPath": "*****"//选中后的图标
}
]
}
}

需要注意的是:其他页面要跳转到tabBar页面,需要使用wx.switchTab,例子如下:

wx.switchTab({
url: '../pages1/pages1'
})

微信小程序底部导航栏(tabbar)的更多相关文章

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

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

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

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

  3. 微信小程序底部导航Tabbar

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

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

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

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

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

  6. 微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况

    背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中 页面的 title 只支持纯文本级别的样式控 ...

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

    微信小程序需要自定义导航栏,特别是左上角的自定义设置,可以设置返回按钮,菜单按钮,配置如下: 1.在app.json的window属性中增加: navigationStyle:custom 顶部导航栏 ...

  8. 微信小程序自定义导航栏组件

    1.首先,要在json文件中设置为自定义的形式 "navigationStyle": "custom" 2.计算相关值 导航栏分为状态栏和标题栏,只要能算出每台 ...

  9. 微信小程序 - 自定义导航栏(提示)

    点击下载: 自定义导航栏示例

随机推荐

  1. mysql登陆时出现ERROR 2013 (HY000): Lost connection to MySQL server at 'reading initial communication packet', system error: 0

    有4到5天没开mysql,这天晚上打=打开phpstudy,想进去mysql练习练习,结果丢给我这个 ERROR 2013 (HY000): Lost connection to MySQL serv ...

  2. bay——vSphere Oracle12cR2的RAC搭建安装之配置共享存储 - 副本

    vSphere Oracle12cR2的RAC搭建安装之配置共享存储 https://blog.csdn.net/yuzifen/article/details/82496503 一.第一台机器添加两 ...

  3. Scrapy 下载图片时 ModuleNotFoundError: No module named'PIL'

    使用scrapy的下载模块需要PIL(python图像处理模块)的支持,使用pip安装即可

  4. Linux系统学习 二、测评-身份鉴别1

    身份鉴别 1)对登陆操作系统和数据库系统的用户进行身份表示和鉴别 1.密码文件中的口令字段是否不为空 2.检查各个用户主目录下的.rhosts文件 3.查看/etc/hosts.equiv 学习: 1 ...

  5. APK更新集成实践

    任务目标:将内网APK打包后最新下载链接.更新时间.更改日志显示在一个我自己制作的APP里 任务作用:我们在内网测试时更新下载APK更加便捷,并且能够清楚目标APK的版本情况,回归.验证做到有的放矢 ...

  6. JetBrains IntelliJ IDEA 2019 for Mac(Java集成开发环境) 2019.3.1

    IntelliJ IDEA 2019中文激活版已全新上线,intellij idea mac是目前编程人员最喜欢的Java集成开发环境,具备智能代码助手.代码自动提示.重构.J2EE支持.Ant.JU ...

  7. C++并发编程实战

    第1章 你好,C++并发世界 第2章 管理线程 第3章 在线程间数据共享 第4章 同步并发操作 第5章 C++内存模型和原子类型操作 第6章 设计基于锁的并发数据结构 第7章 设计无锁的并发数据结构 ...

  8. Vue 时间修饰符之使用$event和prevent修饰符操作表单

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Maven配置教程

    Maven的下载 在Maven的官网即可下载,点击访问Apache Maven. 下载后解压即可,解压后目录结构如下: Maven常用配置 在配置之前请将JDK安装好. 1. 环境变量配置 添加M2_ ...

  10. C#开发BIMFACE系列26 服务端API之获取模型数据11:获取单个面积分区信息

    系列目录     [已更新最新开发文章,点击查看详细] 在<C#开发BIMFACE系列25 服务端API之获取模型数据9:获取楼层对应面积分区列表>一文中介绍了如何获取单个模型中单个楼层包 ...