Tabbar

Tabbar 类似uni-app原生tabbar组件,可用于自定义tabbar,自定义tabbar逻辑可参考小程序自定义tabbar,建议使用原生tabbar。

组件结构

  1. <template>
  2. <viewclass="tui-tabbar" :class="{'tui-tabbar-fixed':isFixed,'tui-unlined':unlined}" :style="{background:backgroundColor}">
  3. <blockv-for="(item,index) in tabBar" :key="index">
  4. <viewclass="tui-tabbar-item" :class="{'tui-item-hump':item.hump}"
  5. :style="{backgroundColor:item.hump?backgroundColor:'none'}" @tap="tabbarSwitch(index,item.hump,item.pagePath,item.verify)">
  6. <viewclass="tui-icon-box" :class="{'tui-tabbar-hump':item.hump}">
  7. <image :src="current==index?item.selectedIconPath:item.iconPath" :class="[item.hump?'':'tui-tabbar-icon']"></image>
  8. <view :class="[item.isDot?'tui-badge-dot':'tui-badge']" :style="{color:badgeColor,backgroundColor:badgeBgColor}"
  9. v-if="item.num">{{item.isDot?"":item.num}}</view>
  10. </view>
  11. <viewclass="tui-text-scale" :class="{'tui-text-hump':item.hump}" :style="{color:current==index?selectedColor:color}">{{item.text}}</view>
  12. </view>
  13. </block>
  14. <view :class="{'tui-hump-box':hump}"v-if="hump && !unlined"></view>
  15. </view>
  16. </template>

组件脚本

  1. <script>
  2. exportdefault{
  3. name:"tuiTabbar",
  4. props:{
  5. //当前索引
  6. current:{
  7. type:Number,
  8. default:0
  9. },
  10. //字体颜色
  11. color:{
  12. type:String,
  13. default:"#666"
  14. },
  15. //字体选中颜色
  16. selectedColor:{
  17. type:String,
  18. default:"#5677FC"
  19. },
  20. //背景颜色
  21. backgroundColor:{
  22. type:String,
  23. default:"#FFFFFF"
  24. },
  25. //是否需要中间凸起按钮
  26. hump:{
  27. type:Boolean,
  28. default:false
  29. },
  30. //固定在底部
  31. isFixed:{
  32. type:Boolean,
  33. default:true
  34. },
  35. //tabbar
  36. // "pagePath": "/pages/my/my", 页面路径
  37. // "text": "thor", 标题
  38. // "iconPath": "thor_gray.png", 图标地址
  39. // "selectedIconPath": "thor_active.png", 选中图标地址
  40. // "hump": true, 是否为凸起图标
  41. // "num": 2, 角标数量
  42. // "isDot": true, 角标是否为圆点
  43. // "verify": true 是否验证 (如登录)
  44. tabBar:{
  45. type:Array,
  46. default(){
  47. return[]
  48. }
  49. },
  50. //角标字体颜色
  51. badgeColor:{
  52. type:String,
  53. default:"#fff"
  54. },
  55. //角标背景颜色
  56. badgeBgColor:{
  57. type:String,
  58. default:"#F74D54"
  59. },
  60. unlined:{
  61. type:Boolean,
  62. default:false
  63. }
  64. },
  65. watch:{
  66. current(){
  67. }
  68. },
  69. data(){
  70. return{
  71. };
  72. },
  73. methods:{
  74. tabbarSwitch(index, hump, pagePath,verify){
  75. this.$emit("click",{
  76. index: index,
  77. hump: hump,
  78. pagePath: pagePath,
  79. verify:verify
  80. })
  81. }
  82. }
  83. }
  84. </script>

组件样式

... 此处省略n行

脚本说明

props

参数类型描述默认值
currentNumber当前tabbar索引0
colorString字体颜色#666
selectedColorString字体选中颜色#5677FC
backgroundColorString背景颜色#FFFFFF
humpBoolean是否需要中间凸起按钮false
isFixedBoolean是否固定在底部true
tabBarArraytabbar列表[]
badgeColorString角标字体颜色#fff
badgeBgColorString角标背景颜色#F74D54
unlinedBoolean去掉顶部细线false
 props:
   "tabBar 字段":
         "pagePath": "/pages/my/my", //页面路径
         "text": "thor", //标题
         "iconPath": "thor_gray.png", //图标地址
         "selectedIconPath": "thor_active.png", //选中图标地址
         "hump": true, //是否为凸起图标
         "num": 2,   //角标数量
         "isDot": true,  //角标是否为圆点
         "verify": true  //是否验证  (如登录)

methods

名称描述
tabbarSwitchtababr切换点击事件

示例

... 此处省略n行,下载源码查看

预览图

Tabbar 标签栏 - 图1