在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. Python菜鸟文本处理4种方法

    自从认识了python这门语言,所有的事情好像变得容易了,作为小白,逗汁儿今天就为大家总结一下python的文本处理的一些小方法. 话不多说,代码撸起来. python大小写字符互换 在进行大小写互换 ...

  2. flex常见布局

    一,常见圣杯布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  3. Python使用Flask实现RESTful API,使用Postman工具、requests库测试接口

    RESTful是一种API设计规范.在RESTful架构中,主要使用POST,DELETE,PUT和GET四种HTTP请求方式分别对指定的URL资源进行增删改查操作. RESTful之前的做法: /u ...

  4. LeetCode刷题191118

    博主渣渣一枚,刷刷leetcode给自己瞅瞅,大神们由更好方法还望不吝赐教.题目及解法来自于力扣(LeetCode),传送门. 算法: 给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按 ...

  5. bay——巡检RAC命令_版本.txt

    df -lhhostnamecat /etc/hostsifconfig ps -ef | grep tnsps -ef | grep asmps -ef | grep ora_ ls -l /dev ...

  6. docker 私有registry harbor安装

    一,harbor安装: 参考:Installation and Configuration Guide 1,安装docker 2,安装docker compose sudo curl -L " ...

  7. Navicat Premium 破解方法

    最新Navicat Premium12 破解方法,亲测可用 1.下载Navicat Premium 官网https://www.navicat.com.cn/下载最新版本下载安装(文末,网盘地址有64 ...

  8. sed命令总结

    目录 1.概述 2.查 1.打印整行(一或多) 2.正则打印包含关键字的行 2.增 3.删 4.改 5.后向引用 6.结合 7.练习 我叫张贺,贪财好色.一名合格的LINUX运维工程师,专注于LINU ...

  9. misc-3-1

    无后缀,用winhex发现是rar,添加后缀解压,依据是无后缀,丢到kali,是一个流量数据包 TCP追踪流在第五个数据包发现flag.rar 导出对象 选择HTTP 找到flag.rar 然后丢到你 ...

  10. acwing 600. 仰视奶牛

    题目地址  https://www.acwing.com/problem/content/description/602/ 约翰有N头奶牛,编号为1到N. 现在这N头奶牛按编号从小到大的顺序站成了一排 ...