Appearance

iuiDesign
100%
02:32
本页目录

用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。

基本使用 ​

html
<iui-navbar title="Title"></iui-navbar>
<iui-navbar title="Title"></iui-navbar>

返回按钮 ​

通过 back 属性设置是否显示返回箭头。

html
<iui-navbar title="Title" back></iui-navbar>
<iui-navbar title="Title" back></iui-navbar>

自定义样式 ​

通过 customStyle 属性设置导航栏样式。

html
<iui-navbar
  title="Background Color"
  back
  :customStyle="customStyle"
></iui-navbar>

<script setup>
  const customStyle = {
    backgroundColor: "#165DFF",
    color: "#fff",
  };
</script>
<iui-navbar
  title="Background Color"
  back
  :customStyle="customStyle"
></iui-navbar>

<script setup>
  const customStyle = {
    backgroundColor: "#165DFF",
    color: "#fff",
  };
</script>

使用自定义样式添加背景图片。

html
<iui-navbar
  title="Background Image"
  back
  hideStatusBar
  :customStyle="customStyle"
></iui-navbar>

<script setup>
  const customStyle = {
    background: "url(https://example.png)",
    backgroundSize: "cover",
    color: "#fff",
    height: "160px",
    padding: "10px 0",
  };
</script>
<iui-navbar
  title="Background Image"
  back
  hideStatusBar
  :customStyle="customStyle"
></iui-navbar>

<script setup>
  const customStyle = {
    background: "url(https://example.png)",
    backgroundSize: "cover",
    color: "#fff",
    height: "160px",
    padding: "10px 0",
  };
</script>

自定义内容 ​

通过 left 插槽可以自定义导航栏左侧的内容。

html
<!-- 左侧显示为搜索栏 -->
<iui-navbar>
  <template #left>
    <view class="search">
      <iui-icon style="display: contents" name="search"></iui-icon>
      <input style="font-size: small; margin-left: 4px" placeholder="搜索" />
    </view>
  </template>
</iui-navbar>
<!-- 左侧显示为搜索栏 -->
<iui-navbar>
  <template #left>
    <view class="search">
      <iui-icon style="display: contents" name="search"></iui-icon>
      <input style="font-size: small; margin-left: 4px" placeholder="搜索" />
    </view>
  </template>
</iui-navbar>

异步返回 ​

通过 beforeBack 属性设置返回按钮的异步关闭。

html
<iui-navbar title="Title" :beforeBack="beforeBack" back></iui-navbar>

<script setup>
  // beforeBack 函数接收一个 done 函数作为参数，调用 done 函数则关闭页面
  const beforeBack = (done) => {
    uni.showModal({
      title: "确认返回吗",
      content: "",
      showCancel: true,
      success: ({ confirm }) => {
        if (confirm) {
          done();
        }
      },
    });
  };
</script>
<iui-navbar title="Title" :beforeBack="beforeBack" back></iui-navbar>

<script setup>
  // beforeBack 函数接收一个 done 函数作为参数，调用 done 函数则关闭页面
  const beforeBack = (done) => {
    uni.showModal({
      title: "确认返回吗",
      content: "",
      showCancel: true,
      success: ({ confirm }) => {
        if (confirm) {
          done();
        }
      },
    });
  };
</script>

API ​

<Navbar>props
参数描述类型默认值
title导航栏标题String-
back是否显示返回按钮Booleanfalse
fixed是否固定在顶部Booleanfalse
customStyle自定义样式Object-
statusBarColor状态栏背景颜色Stringtransparent
hideStatusBar隐藏状态栏(一般用于顶部有图片的情况)Booleanfalse
split是否显示状态栏底部分割线Booleantrue
<Navbar>slots
插槽名描述参数
left左侧内容-