mosowe-tab-bar 底部导航

uniapp/uni_modules组件

下载地址

兼容性

平台	android	ios	微信小程序	H5
兼容	√	√	√	√

props

属性	类型	说明	默认
list	MosoweTabBarItemType[]	导航列表	[]
color	string	默认字体颜色	rgba(19, 25, 54, 0.75)
selectColor	string	选中字体颜色	#6CCEAE
iconColor	string	默认图标颜色	rgba(19, 25, 54, 0.75)
iconSelectColor	string	选中图标颜色	#6CCEAE
hideIcon	boolean	隐藏图标	false
fontMidIconColor	string	中间字体图标颜色	rgba(19, 25, 54, 0.75)
loginPath	string	登录地址	-
fixed	boolean	固定底部定位	true

MosoweTabBarItemType

属性	类型	说明
icon	string	默认图标
selectIcon	string	选中图标
text	string	菜单名称
path	string	菜单路径
isCenter	boolean	是否为中部凸起菜单
login	boolean	是否已登录，不传就无需校验
hide	boolean	是否隐藏
disabled	boolean	是否置灰不可点击
dot	boolean	是否显示小红点

emits

事件名	说明
midClick	中间凸起按钮点击事件

slots

插槽名	说明
default	导航项插槽，作用域参数：{ item }

示例代码

<template>
  <mosowe-tab-bar
    :list="list"
    @midClick="midClick"
  >
        </mosowe-tab-bar
  >
</template>

<script setup lang="ts">
  const list = [
    {
      icon: 'zoicon mosowe-circle-check',
      selectIcon: 'zoicon mosowe-fill-check',
      text: '字体图标默认',
      path: ''
    },
    {
      icon: 'zoicon mosowe-fill-check',
      selectIcon: 'zoicon mosowe-fill-check',
      text: '',
      path: '',
      isCenter: true,
      dot: true
    },
    {
      icon: 'zoicon mosowe-circle-check',
      selectIcon: 'zoicon mosowe-fill-check',
      text: '字体图标选中',
      path: ''
    }
  ];
  const midClick = () => {
    uni.showToast({
      title: '中间按钮点击',
      icon: 'none',
      mask: true
    });
  };
</script>

贡献者

mosowe