在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. requests-html库render的使用

    一.render的使用 from requests_html import HTMLSession session =HTMLSession() response = session.get('htt ...

  2. ORACLE等待事件:read by other session

    read by other session简介 官方关于read by other session的介绍如下: When information is requested from the datab ...

  3. 转载:wepy框架入门

    转载:https://www.jianshu.com/p/93d5a4b99777 安装 wepy 命令行工具. npm install wepy-cli -g 在开发目录生成开发DEMO. wepy ...

  4. ORM优化查询、choices参数

    目录 ORM查询优化 only与defer select_related和prefetch_related MTV与MVC模型 choices参数 ORM查询优化 only与defer res = m ...

  5. 第6次作业--static关键字、对象

    题目1:编写一个类Computer,类中含有一个求n的阶乘的方法.将该类打包,并在另一包中的Java文件App.java中引入包,在主类中定义Computer类的对象,调用求n的阶乘的方法(n值由参数 ...

  6. 7.SourceTree 的使用

    SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端管理工具,同时也是Mn版本控制系统工具.支持创建.克隆.提交.push.pull 和合并等操作. 下载路 ...

  7. 201871010113-刘兴瑞《面向对象程序设计(java)》第八周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>htt ...

  8. P4287 [SHOI2011]双倍回文

    题意 考虑对每个节点\(x\)维护\(lastpos_x\)表示\(x\)的所有后缀回文串中第一个\(len\leqslant len_x/2\)并且能和\(x\)最后一个字符匹配的,之后枚举节点,判 ...

  9. python中append的使用

    没有系统地学习过python,最近在append的使用上遇到了大问题,吃到了苦头 之前一直单纯地认为通过append把数添加到list中,不需要提前开空间,非常便利,但却没有意识到这个过程并不是值传递 ...

  10. OpenDaylight开发hello-world项目之代码框架搭建

    OpenDaylight开发hello-world项目之开发环境搭建 OpenDaylight开发hello-world项目之开发工具安装 OpenDaylight开发hello-world项目之代码 ...