Rainui

Appearance

r-nav-bar ​

r-nav-bar 导航栏，为页面提供导航功能，常用于页面顶部。

示例 ​

vue
<template>
  <r-config-provider>
    <view style="padding: 10rpx 0">
      <r-divider content-position="left">基本使用</r-divider>
      <r-nav-bar title="标题" />

      <r-divider content-position="left">返回上级</r-divider>
      <r-nav-bar
        title="标题"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />

      <r-divider content-position="left">右侧按钮</r-divider>

      <r-nav-bar
        title="标题"
        left-text="返回"
        right-text="按钮"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />

      <r-divider content-position="left">使用插槽</r-divider>

      <r-nav-bar title="标题" left-text="返回" left-arrow>
        <template #right>
          <r-icon
            name="search"
            size="36rpx"
            color="var(--r-nav-bar-icon-color)"
          />
        </template>
      </r-nav-bar>

      <r-divider content-position="left">禁用按钮</r-divider>
      <r-nav-bar
        title="标题"
        left-text="返回"
        right-text="按钮"
        left-arrow
        left-disabled
        right-disabled
      />
    </view>
  </r-config-provider>
</template>

<script setup>
const onClickLeft = () => {
  uni.navigateBack();
};

const onClickRight = () => {
  console.log("click right");
};
</script>

API ​

Props ​

名称说明类型默认值可选值
title标题String-
left-text左侧文案String-
right-text右侧文案String-
left-disabled是否禁用左侧按钮，禁用时透明度降低，且无法点击Booleanfalse
right-disabled是否禁用右侧按钮，禁用时透明度降低，且无法点击Booleanfalse
left-arrow是否显示左侧箭头Booleanfalse
border是否显示下边框Booleantrue
fixed是否固定在顶部Booleanfalse
placeholder固定在顶部时，是否在标签位置生成一个等高的占位元素Booleanfalse
z-index导航栏 z-indexString | Number1
safe-area-inset-top是否开启顶部安全区适配Booleanfalse
clickable是否开启两侧按钮的点击反馈Booleantrue
themeName主题名称Stringdefault

Events ​

名称说明回调参数
click-left点击左侧按钮时触发e
click-right点击右侧按钮时触发e

Slots ​

名称说明
title自定义标题
left自定义左侧区域内容
right自定义右侧区域内容

更多组件，请前往rainui