更新记录

1.0.4（2024-08-06） 下载此版本

修改文档

1.0.3（2024-07-30） 下载此版本

适配r-config-provider

1.0.2（2024-07-29） 下载此版本

适配r-theme并修复安全高度重复的bug

平台兼容性

r-nav-bar

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

示例

<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

Events

Slots

更多组件，请前往rainui