微信小程序tabBar设置实例解析


Posted in Javascript onNovember 14, 2019

这篇文章主要介绍了微信小程序tabBar设置实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

我们先来看一份图,这个设置在官方文档中已经写得很清楚了,我只是做一个总结

微信小程序tabBar设置实例解析

注:我写注释是为了方便说明,在小程序中的json文件中是不能用注释的

这个tabBar属于全局属性,因此就在全局配置文件app.json中配置

1.tabBar的配置

"color": "#8a8a8a",
  "selectedColor": "#f40",//选中的颜色
  "backgroundColor": "#ffffff",//背景色
  "borderStyle": "black",//边界线的颜色
  "position":"top",//位置,是在上边。还是选择在下边,如果选择top,就不会显示图标
  "list": [//组件的清单
   {
    "pagePath": "page/component/index",//页面路径
    "text": "组件",//组件上显示的文字 
    "iconPath": "img/compont_un.png",//默认图标
    "selectedIconPath": "img/compont_on.png"//选中后的图标
   },
   {
    "pagePath": "page/API/index",
    "text": "API",
    "iconPath": "img/API_un.png",
    "selectedIconPath": "img/API_on.png"
   },
   {
    "pagePath": "page/persion/index",
    "text": "我的",
    "iconPath": "img/我的_un.png",
    "selectedIconPath": "img/我的_on.png"
   },
   {
    "pagePath": "pages/logs/logs",
    "text": "日志",
    "iconPath": "img/日志.png",
    "selectedIconPath": "img/日志_on.png"
   }
  ]
 },

最后再加一张图,如果你设置了在顶部显示,效果如下:

微信小程序tabBar设置实例解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
layui清除radio的选中状态实例
Nov 14 #Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 #Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 #Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 #Javascript
用Node写一条配置环境的指令
Nov 14 #Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 #Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 #Javascript
You might like
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php计算函数执行时间的方法
2015/03/20 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
基于jquery的分页控件(C#)
2011/01/06 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
详解Vue的异步更新实现原理
2020/12/22 Vue.js
vue实现轮播图帧率播放
2021/01/26 Vue.js
python2 与python3的print区别小结
2018/01/16 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
python 实现两个线程交替执行
2020/05/02 Python
python删除某个目录文件夹的方法
2020/05/26 Python
简单了解Django项目应用创建过程
2020/07/06 Python
Python 随机按键模拟2小时
2020/12/30 Python
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
保护动物倡议书
2014/04/15 职场文书
承诺书格式范文
2014/06/03 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
公司开除员工通知
2015/04/22 职场文书