Tabbar

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

组件结构

  1. <template>
  2.     <view class="tui-tabbar" :class="{'tui-tabbar-fixed':isFixed,'tui-unlined':unlined}" :style="{background:backgroundColor}">
  3.         <block v-for="(item,index) in tabBar" :key="index">
  4.             <view class="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.                 <view class="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.                 <view class="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.     export default {
  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.             }
  65.         },
  66.         watch: {
  67.             current() {
  69.             }
  70.         },
  71.         data() {
  72.             return {
  74.             };
  75.         },
  76.         methods: {
  77.             tabbarSwitch(index, hump, pagePath,verify) {
  78.                 this.$emit("click", {
  79.                     index: index,
  80.                     hump: hump,
  81.                     pagePath: pagePath,
  82.                     verify:verify
  83.                 })
  84.             }
  85.         }
  86.     }
  87. </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