更新记录

1.0.4(2024-08-06) 下载此版本

修改文档

1.0.3(2024-08-06) 下载此版本

修改文档

1.0.2(2024-07-30) 下载此版本

适配r-config-provider

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

r-tabbar

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

示例

<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|Number 0
fixed 是否固定在顶部 Boolean false
border 是否显示下边框 Boolean true
z-index 导航栏 z-index String | Number 1
active-color 选中标签的颜色 String #1989fa
inactive-color 未选中标签的颜色 String #7d7e80
placeholder 固定在底部时,是否在标签位置生成一个等高的占位元素 Boolean false
safe-area-inset-bottom 是否开启底部安全区适配 Boolean false
before-change 切换标签前的回调函数,返回 false 可阻止切换,支持返回 Promise Function -
themeName 主题名称 String default

Tabbar Events

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

TabbarItem Props

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

TabbarItem Slots

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

更多组件,请前往rainui

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问