微信小程序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 相关文章推荐
jQuery之按钮组件的深入解析
Jun 19 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 Javascript
js实现点击选项置顶动画效果
Aug 25 Javascript
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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
PHP 变量的定义方法
2010/01/26 PHP
PHP 文件系统详解
2012/09/13 PHP
php 常用的系统函数
2017/02/07 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
Python中的Classes和Metaclasses详解
2015/04/02 Python
浅述python2与python3的简单区别
2018/09/19 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
python 等差数列末项计算方式
2020/05/03 Python
Django多数据库联用实现方法解析
2020/11/12 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
社区居务公开实施方案
2014/03/27 职场文书
怀念母亲教学反思
2014/04/28 职场文书
个人收入证明模板
2014/09/18 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
初中团委工作总结
2015/08/13 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers