小程序入门系列之 tabBar

本系列为简单入门系列,以一定概括性思路来叙述内容,具体可以查看官网

大部分的电商应用都是底部或顶部多 tab 的模式. 下面我们从配置角度来分析一下:

第一个:position 配置如下:

默认是 bottom,也可以设置 top 来改变 tabBar 的位置

第二个:list 配置如下:

必须的参数:

  • text 文字,如果是 position 为 bottom,会出现在 icon 的下面
  • pagePath 跳转的路径

可选参数:如果 position 设置了 top,就不会显示

  • iconPath 默认 icon 的路径
  • selectedIconPath 选中 icon 的路径

这 2 个多不支持网络图片,尺寸建议是 81*81

但是请注意:

1、最少 2 个,不然会报错:

tabBar.list 需至少包含 2 项

2、最多 5 个,

tabBar.list 不能超过 5 项

3、里面的 pagePath 不能为空,而且需要在 pages 数组定义

第三个:设置 text 文字的颜色

  • color 默认的文字颜色
  • selectedColor 选中的文字颜色

第四个:tabBar 的背景和边框

  • borderStyle 边框的颜色,默认 black,支持 white 和 black 两种
  • backgroudColor 背景颜色
    原文作者:dailyvuejs
    原文地址: https://segmentfault.com/a/1190000016276905
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞