Rainui

Appearance

r-tabbar ​

r-tabbar 标签栏，底部导航栏，用于在不同页面之间进行切换。

示例 ​

vue
<template>
  <r-config-provider>
    <view style="padding: 10rpx 0">
      <r-divider content-position="left">基本使用</r-divider>
      <r-tabbar v-model:value="active" :fixed="false">
        <r-tabbar-item icon="home-o">标签</r-tabbar-item>
        <r-tabbar-item icon="search">标签</r-tabbar-item>
        <r-tabbar-item icon="friends-o">标签</r-tabbar-item>
        <r-tabbar-item icon="setting-o">标签</r-tabbar-item>
      </r-tabbar>

      <r-divider content-position="left">通过名称匹配 </r-divider>
      <r-tabbar v-model:value="active2" :fixed="false">
        <r-tabbar-item name="home" icon="home-o">标签</r-tabbar-item>
        <r-tabbar-item name="search" icon="search">标签</r-tabbar-item>
        <r-tabbar-item name="friends" icon="friends-o">标签</r-tabbar-item>
        <r-tabbar-item name="setting" icon="setting-o">标签</r-tabbar-item>
      </r-tabbar>
      <r-divider content-position="left">徽标提示 </r-divider>
      <r-tabbar v-model:value="active" :fixed="false">
        <r-tabbar-item icon="home-o">标签</r-tabbar-item>
        <r-tabbar-item icon="search" dot>标签</r-tabbar-item>
        <r-tabbar-item icon="friends-o" badge="5">标签</r-tabbar-item>
        <r-tabbar-item icon="setting-o" badge="20">标签</r-tabbar-item>
      </r-tabbar>

      <r-divider content-position="left">自定义图标 </r-divider>
      <r-tabbar v-model:value="active" :fixed="false">
        <r-tabbar-item badge="3">
          <span>自定义</span>
          <template #icon="props">
            <r-image
              width="var(--r-tabbar-item-icon-size)"
              height="var(--r-tabbar-item-icon-size)"
              :src="props.active ? icon.active : icon.inactive"
            />
          </template>
        </r-tabbar-item>
        <r-tabbar-item icon="search">标签</r-tabbar-item>
        <r-tabbar-item icon="setting-o">标签</r-tabbar-item>
      </r-tabbar>

      <r-divider content-position="left">自定义颜色 </r-divider>

      <r-tabbar v-model:value="active" active-color="#ee0a24" :fixed="false">
        <r-tabbar-item icon="home-o">标签</r-tabbar-item>
        <r-tabbar-item icon="search">标签</r-tabbar-item>
        <r-tabbar-item icon="friends-o">标签</r-tabbar-item>
        <r-tabbar-item icon="setting-o">标签</r-tabbar-item>
      </r-tabbar>

      <r-divider content-position="left">监听切换事件 </r-divider>

      <r-tabbar v-model:value="active" @change="onChange" :fixed="false">
        <r-tabbar-item icon="home-o">标签 1</r-tabbar-item>
        <r-tabbar-item icon="search">标签 2</r-tabbar-item>
        <r-tabbar-item icon="friends-o">标签 3</r-tabbar-item>
        <r-tabbar-item icon="setting-o">标签 4</r-tabbar-item>
      </r-tabbar>
    </view>
  </r-config-provider>
</template>

<script setup>
import { ref } from "vue";
const active = ref(0);
const active2 = ref("home");
const icon = ref({
  active: "https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png",
  inactive: "https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png",
});
const onChange = (e) => {
  console.log("e", e);
};
</script>

API ​

Tabbar Props ​

名称说明类型默认值可选值
value当前选中标签的名称或索引值String|Number0
fixed是否固定在顶部Booleanfalse
border是否显示下边框Booleantrue
z-index导航栏 z-indexString | Number1
active-color选中标签的颜色String#1989fa
inactive-color未选中标签的颜色String#7d7e80
placeholder固定在底部时，是否在标签位置生成一个等高的占位元素Booleanfalse
safe-area-inset-bottom是否开启底部安全区适配Booleanfalse
before-change切换标签前的回调函数，返回 false 可阻止切换，支持返回 PromiseFunction-
themeName主题名称Stringdefault

Tabbar Events ​

名称说明回调参数
update:value切换标签时触发active
change切换标签后触发active

TabbarItem Props ​

名称说明类型默认值可选值
name标签名称，作为匹配的标识符Number|String--
icon图标名称String--
icon-prefix图标类名前缀Stringvan-iconiconfont
dot是否显示图标右上角小红点Booleanfalsetrue
badge图标右上角徽标的内容Number|String--
badgeColor徽标背景颜色String--
max最大值,超过最大值会显示 {max}+，仅当 content 为数字时有效Number| String--
offset设置徽标的偏移量，数组的两项分别对应水平向右和垂直向下方向的偏移量，默认单位为 pxArray--
showZero当 content 为数字 0 或字符串 '0' 时，是否展示徽标Booleantruefalse
position徽标位置Stringtop-righttop-right top-left bottom-left bottom-right
themeName主题名称Stringdefault

TabbarItem Slots ​

名称说明回调参数
icon自定义图标active

更多组件，请前往rainui