极乐门资源网 Design By www.ioogu.com

这篇文章主要介绍了微信小程序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设置实例解析

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

标签:
微信,小程序,tabBar,设置

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“微信小程序tabBar设置实例解析”

暂无微信小程序tabBar设置实例解析的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。