用法简介:

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. 【WinRT】多语言化应用程序名称

    在Windows Phone 8的时候,要对应用程序在列表中显示的名称和锁定到开始屏幕的磁贴的名称进行多语言化是十分困难的,需要使用C++建立一个多语言资源库.但是,在WinRT中,这变得简单多了,无 ...

  2. 如何使用T-SQL备份还原数据库及c#如何调用执行?

    准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup database 数据库名 to disk='保存路径 ...

  3. asp.net使用SpeechSynthesizer类生成语音文件部署到iis遇到的几个坑

    首先需要引入命名空间System.Speech.Synthesis,代码如下: using (var speechSyn = new SpeechSynthesizer()) { speechSyn. ...

  4. 委托发展史(Linq操作符)

    嗯~这篇就讲讲Linq吧! 之前讲过Lambda最后进化到了令人发指的地步: Func<string, int> returnLength; returnLength = text =&g ...

  5. SQLServer 2014 AlwaysOn

    一.安装故障转移群集的准备 确保群集中的节点都已加入到域(本例中为2节点) 确保将域帐户添加到本机管理员组 二.安装故障转移群集(所有节点都需要安装该功能) 1)单击任务栏”服务器管理器”,打开服务器 ...

  6. JDK源码分析(10) CopyOnWriteArrayList

    概述 CopyOnWriteArrayList是一个线程安全集合,原理简单说就是:在保证线程安全的前提下,牺牲掉写操作的效率来保证读操作的高效.所谓CopyOnWrite就是通过复制的方式来完成对数据 ...

  7. python的super用法及含义

    注释:以下都是在python2.7版本验证的 总括:1.python解决二义性问题,经历了深度优先算法.广度优先算法.拓扑排序算法,目前python的版本都是使用拓扑算法(C3)    2.严谨sup ...

  8. linux 中定时执行python脚本

    一.让Python随Linux开机自动运行 准备好要自启的脚本auto.py 用root权限编辑以下文件 sudo vim /ect/rc.local 在exit 0上面编辑启动脚本的命令(编辑rc. ...

  9. activemq消息生产者与消息消费者简单例子

    消息生产者HelloQueueProducer.java package activemq.test; import javax.jms.Connection;import javax.jms.Con ...

  10. apt小问题

    安装软件遇到情况,一直等待: root@test-xxx:/opt# apt-get install vsftpdReading package lists... DoneBuilding depen ...