在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. ASP.NET Core 2.2 WebApi 系列【三】AutoFac 仓储接口的依赖注入

    一.准备工作 通过程序包管理器控制台安装AutoFac: Install-Package Autofac.Extensions.DependencyInjection 创建新类库(.NetCore 2 ...

  2. swool安装(centos7)

    1:获取swoole https://github.com/swoole/swoole-src/releases http://pecl.php.net/package/swoole http://g ...

  3. golang中,new和make的区别

    在golang中,make和new都是分配内存的,但是它们之间还是有些区别的,只有理解了它们之间的不同,才能在合适的场合使用. 简单来说,new只是分配内存,不初始化内存: 而make即分配又初始化内 ...

  4. 利用Azure虚拟机安装Dynamics 365 Customer Engagement之十:为SQL Server配置Always On

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  5. Python—创建进程池的方式

    创建进程池 from multiprocessing import Pool import time,os result = [] # 存放所有worker函数的返回值 def worker(msg) ...

  6. android binder 进程间通信机制2 - Binder进程间通信库实现原理

    1.Service组件 使用模板类BnInterface描述,称为Binder本地对象,对应于Binder驱动程序中的Binder实体对象 实现原理图如下:

  7. java8-02-再探Lambda表达式

    Lambda表达式   主要作用替代匿名内部类   达到简化代码的操作                                  Lambda表达式 在对象中的使用   Employee类

  8. 0. gitlab 一些常用知识

    Monitor 但是有反映  提交慢的情况时候.  可以查看一下队列 使用root账号 gitlab最多可以同时25个队列.  多了需要排队. 可以查看一下原因.

  9. dfs的几个基础示例 acwin 91~94

    从 ~n 这 n 个整数中随机选取任意多个,输出所有可能的选择方案. 输入格式 输入一个整数n. 输出格式 每行输出一种方案. 同一行内的数必须升序排列,相邻两个数用恰好1个空格隔开. 对于没有选任何 ...

  10. nginx学习(二):nginx显示默认首页解析过程

    本篇文章分析下nginx 显示默认首页的过程 如下图所示 查看config文件: # 如果忘记nginx 安装目录.使用下面命令查看 [root@XXX]# whereis nginx nginx: ...