用法简介:

1.app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项

这里简单列举一些属性值:对于tabBar整体属性设置:

对于tabBar中每个Item属性设置:

简单的例子如下:

"tabBar": {
"selectedColor":"#8D503E",
"list": [
{
"pagePath": "pages/home_page/index",
"iconPath": "img/home.png",
"selectedIconPath": "img/home-s.png",
"text": "首页"
},
{
"pagePath": "pages/sign_up/index",
"iconPath": "img/task.png",
"selectedIconPath": "img/task-s.png",
"text": "选课报名"
},
{
"pagePath": "pages/party_subject/index",
"iconPath": "img/dj.png",
"selectedIconPath": "img/dj-s.png",
"text": "党建专题"
},
{
"pagePath": "pages/person/index",
"iconPath": "img/mine.png",
"selectedIconPath": "img/mine-s.png",
"text": "我的"
}
]
}

注意:

配置list的第一个一定是要是最先显示的,否则会出现底部导航看不到。

小程序之底部tabBar的更多相关文章

  1. 微信小程序把玩(三)tabBar底部导航

    原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 ...

  2. 微信小程序-自定义底部导航

    代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  3. 微信小程序之底部弹框预约插件

    代码地址如下:http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...

  4. 小程序自定义底部tab

    首页wxml的代码: <view class="nav" hover-class="none"> <view class="inde ...

  5. 微信小程序设置底部导航栏目方法

    微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了 ...

  6. 微信小程序开发过程中tabbar页面显示的相关问题及解决办法!

    在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰.为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示ta ...

  7. 【小程序】小程序中设置 tabBar

    小程序中 tabBar 的设置,tabBar 就是底部导航栏,在app.json中配置. list 为数组至少两项.tab栏的 position 为 top 时间,不显示图标. "tabBa ...

  8. 微信小程序自定义底部导航栏组件+跳转

    微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...

  9. 微信小程序 从含有tabbar的页面跳转到不含有tabbar的页面

    如何离开含有tabbar的页面 在微信小程序开发过程中,我们会碰到从某页跳转到一个含有tabbar的页面的需求, 用 wx.navigateTo({url: '...',})  不起作用,需要使用 w ...

随机推荐

  1. Quartz.net 起步

    安装 Quartz 程序包 使用 nuget 命令行安装 Quartz: Install-Package Quartz 如果使用 JSON 序列化,使用 nuget 安装 Quartz.Seriali ...

  2. Java反射reflection与注解annotation的应用(自动测试机)

    一.关于自动测试机 1.什么是自动测试机? 对类中的指定方法进行批量测试的工具 2.自动测试机有什么用? a.避免了冗长的测试代码 当类中的成员方法很多时,对应的测试代码可能会很长,使用测试能够让测试 ...

  3. ASP.NET Core真实管道详解[1]

    ASP.NET Core管道虽然在结构组成上显得非常简单,但是在具体实现上却涉及到太多的对象,所以我们在 <ASP.NET Core管道深度剖析[共4篇]> 中围绕着一个经过极度简化的模拟 ...

  4. 关于Git bash 在win10重装系统情况下闪退并生成mintty.exe.stackdump文件的问题

    问题内容:在重装win10系统情况下,有可能会出现安装Git后右击Git bash会出现闪退并生成mintty.exe.stackdump文件 个人解决方案:查看网络上各位网友的意见和解决方法后,自己 ...

  5. javascript快速排序的思考

    还记得三个月前,学习过快速排序,示例所讲的python快速排序十分易于理解,然而网上学习的c#的快速排序当时就懵逼的,现在已经全忘了,大概记得个思路 在学习完了一些高级的js方法后,今天用js模拟了p ...

  6. 深入理解Aspnet Core之Identity(4)

    主题 之前简单介绍了Asp.net core 的初步的使用,本篇我打算给大家介绍一下Identity的架构,让大家对Identity有一个总体的理解和认识. 简介 博客原文欢迎访问我的博客网站,地址是 ...

  7. S11 day 97 -98天 Luffycity项目

    1. 建模 from django.db import models from django.contrib.contenttypes.fields import GenericForeignKey, ...

  8. day111 爬虫第一天

    一.模拟浏览器发请求. import requests r1 =requests.get( url ="https://dig.chouti.com/", headers ={ & ...

  9. Day 27 类的进阶-反射

    11. __new__ 和 __metaclass__ 阅读以下代码: 1 2 3 4 5 6 class Foo(object): def __init__(self): pass obj = Fo ...

  10. Comparable接口——容器中自定义类排序

    1.容器TreeMap,默认根据Key对象中某个属性的从小到大排列元素. (1)如下代码示例,Key是整型数字,所以按照其从小到大的顺序排列 public class TestTreeMap { pu ...