用法简介:

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. Nginx+IIS部署负载均衡的常见问题

    windows 下配置 Nginx 常见问题 一.  Nginx配置 找到 conf 目录里的 nginx.conf 文件,配置Nginx #user nobody; #指定nginx进程数 work ...

  2. VisualStudio神级插件——JetBrains Resharper 2018.2.3 Ultimate完美破解版+教程

    ReSharper是一个JetBrains公司出品的著名的代码生成工具,是Visual Studio里面的一个插件.它包括一系列丰富的能大大增加C#和Visual Basic .NET开发者生产力的特 ...

  3. vue+webpack学习连接地址

    vue.js+webpack模块管理及组件开发 http://geocld.github.io/2016/03/14/vuejs_webpack/ 30分钟手把手教你学webpack实战 https: ...

  4. VS版本与系统不兼容问题

    1.VS2012在win7 64位系统安装快结束时报出一个不兼容的错误. 2.这种情况官方给出解决方法: http://www.microsoft.com/en-us/download/details ...

  5. ASP.NET MVC Areas View 引用 外部母版视图

    ASP.NET MVC Area => Areas View 引用 外部母版视图 创建项目:MVCSite.Area 创建mvc area 1.Areas View 引用 外部母版视图 1.1 ...

  6. “全栈2019”Java多线程第十九章:死锁详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  7. BZOJ3775: 点和直线(计算几何+拉格朗日乘数法)

    题面 传送门 题解 劲啊-- 没有和\(Claris\)一样推,用了类似于\(Shinbokuow\)推已知点求最短直线的方法,结果\(WA\)了好几个小时,拿\(Claris\)代码拍了几个小时都没 ...

  8. Zookeeper原理分析之存储结构ZkDatabase

    ZKDatabase在内存中维护了zookeeper的sessions, datatree和commit logs集合. 当zookeeper server启动的时候会将txnlogs和snapsho ...

  9. Java原子操作类汇总

    当程序更新一个变量时,如果是多线程同时更新这个变量,可能得到的结果与期望值不同.比如:有一个变量i,A线程执行i+1,B线程也执行i+1,经过两个线程的操作后,变量i的值可能不是期望的3,而是2.这是 ...

  10. Java并发工具类之并发数控制神器Semaphore

    Semaphore(信号量)使用来控制通知访问特定资源的线程数量,它通过协调各个线程,以保证合理的使用公共资源. 我们可以这么理解Semaphore,比如一个厕所只有6个坑,同时只能满足6个人上厕所( ...