用法简介:

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. Nodejs-- web服务器

    第一篇关于nodejs的东西,代码在此作为备份. 该代码目前未完成,是一个阻塞式的代码. 1.index.js ar server=require('./server'); var route=req ...

  2. Git Commit 标准化

    1 前言Git Commit Message 应该清晰明了,要用精简的语言说明本次提交的目的,其主要作用是为了后续的搜索.版本的回滚.合并冲突的追溯等操作. 我们在开发时一直以来对 Git Commi ...

  3. DBCC--SQLPERF

    ​提供所有数据库的事务日志空间使用情况统计信息.也可以用于重置等待和闩锁的统计信息. 语法: DBCC SQLPERF ( [ LOGSPACE ] | [ "sys.dm_os_latch ...

  4. C# 标准事件模式

    .NET框架为事件定义了一个标准模式,它的目的是保持框架和用户代码之间的一致性. 标准事件的模式核心是SystemEventArgs——预定义的没有成员的框架类(不同于静态Empty属性) Event ...

  5. .Net Core2.0中使用ADO.NET

    学习了解.NET CORE有段时间,没有用其做项目的主要原因就是这么多年积累的类库兼容问题.今天就先解决SqlHelper的兼容性: 建立类库,目标框架选择.NET Core2.0,复制粘贴代码. 问 ...

  6. App.config使用方法(基础教程)

    WPF程序中的App.config文件是应用程序中经常使用的一种配置文件,System.Configuration.dll文件中提供了大量的读写的配置,是一种很高效的程序配置方式. 1.首先在工程中配 ...

  7. 爬虫Scrapy指令学习

    1.新建一个新的爬虫项目指令 scrapy startproject xxx 2.在项目/spider目录下创建一个名为XXX的爬虫,并指定爬取域的范围  scrapy genspider XXX & ...

  8. svn 连接超时,连接失败解决办法

    1.确认服务是否开启 2.Windows防火墙是否开启,如开启则关闭防火墙 3.安全软件是否将3306与443端口关闭. 关闭后无法连接

  9. centos7 虚拟机中,网卡不启动的解决方式

    使用NAT模式的虚拟centos, 只显示两个网卡,无法连接外网, 输入systemctl start network后报错信息" Restarting network (via syste ...

  10. 通过谷歌浏览器,找到页面某个事件属于哪个js文件

    在进行web开发中,有时候需要找到某个事件是属于哪个js文件,以便对文件进行修改,进行代码开发 1.打开谷歌浏览器, 打开事件所在页面, 鼠标右键, 点击"检查"项; 2.选中El ...