Navbar 导航栏 0.1.33
为页面提供导航功能,常用于页面顶部。
常见问题
右图标被小程序胶囊挡住?
在小程序平台开启自定义顶部导航时,右上角会固定显示胶囊,所以此时右侧插槽及选项是不建议使用。
如何设置为背景透明?
通过 custom-style
设置组件 background-color
为 transparent
。
html
<wd-navbar title="标题" custom-style="background-color: transparent !important;"></wd-navbar>
组件会被 video
覆盖?
video
为原生组件,层级较高,目前无法遮盖,需要具体平台具体分析。
基础用法
通过 title
属性设置导航栏标题。
html
<wd-navbar title="标题"></wd-navbar>
返回上级
在导航栏实现返回上级功能。
html
<wd-navbar title="标题" left-text="返回" left-arrow @click-left="handleClickLeft"></wd-navbar>
ts
function handleClickLeft() {
uni.navigateBack()
}
右侧按钮
在导航栏右侧添加可点击的按钮。
html
<wd-toast></wd-toast>
<wd-navbar title="标题" left-text="返回" left-arrow right-text="按钮" @click-left="handleClickLeft" @click-right="handleClickRight"></wd-navbar>
ts
import { useToast } from '@/uni_modules/wot-design-uni'
const { show: showToast } = useToast()
function handleClickRight() {
showToast('按钮')
}
使用插槽
可以通过 left
和 right
插槽自定义导航栏两侧的内容。
html
<wd-navbar title="标题" left-text="返回" left-arrow>
<template #right>
<wd-icon name="search" size="18" />
</template>
</wd-navbar>
固定在顶部
通过 fixed
可以设置导航条固定在页面顶部,通过设置 placeholder
可以在顶部生成占位空间,通过设置 safeAreaInsetTop
可以开启顶部安全区的适配。
html
<wd-navbar fixed placeholder title="Navbar 导航条" left-arrow safeAreaInsetTop></wd-navbar>
禁用按钮
通过 left-disabled
或 right-disabled
属性来禁用两侧的按钮。按钮被禁用时透明度降低,且无法点击。
html
<wd-navbar title="标题" left-text="返回" right-text="按钮" left-arrow left-disabled right-disabled></wd-navbar>
胶囊样式
通过 capsule
插槽和 navbar-capsule
组件定制返回胶囊。
html
<wd-navbar title="标题" left-text="返回" right-text="设置" left-arrow>
<template #capsule>
<wd-navbar-capsule @back="handleBack" @back-home="handleBackHome" />
</template>
</wd-navbar>
ts
function handleBack() {
uni.navigateBack({})
}
function handleBackHome() {
uni.reLaunch({ url: '/pages/index/Index' })
}
带搜索栏
通过 title
插槽,自定义标题。
html
<wd-navbar left-text="返回" right-text="设置" left-arrow>
<template #title>
<view class="search-box">
<wd-search v-model="keyword" hide-cancel placeholder-left></wd-search>
</view>
</template>
</wd-navbar>
scss
.search-box {
display: flex;
height: 100%;
align-items: center;
--wot-search-padding: 0;
--wot-search-side-padding: 0;
}
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
---|---|---|---|---|---|
title | 卡片标题 | string | - | '' | 0.1.33 |
leftText | 左侧文案 | string | - | '' | 0.1.33 |
rightText | 右侧文案 | string | - | '' | 0.1.33 |
leftArrow | 显示左侧箭头 | boolean | true, false | false | 0.1.33 |
bordered | 显示下边框 | boolean | true, false | true | 0.1.33 |
fixed | 固定到顶部 | boolean | true, false | false | 0.1.33 |
placeholder | 固定在顶部时,在标签位置生成一个等高的占位元素 | boolean | true, false | false | 0.1.33 |
zIndex | 导航栏 z-index | number | - | 1 | 0.1.33 |
safeAreaInsetTop | 开启顶部安全区适配 | boolean | true, false | false | 0.1.33 |
leftDisabled | 禁用左侧按钮,禁用时透明度降低,且无法点击 | boolean | true, false | false | 0.1.33 |
rightDisabled | 禁用右侧按钮,禁用时透明度降低,且无法点击 | boolean | true, false | false | 0.1.33 |
Events
事件名称 | 说明 | 参数 | 最低版本 |
---|---|---|---|
click-left | 点击左侧按钮时触发 | - | 0.1.33 |
click-right | 点击右侧按钮时触发 | - | 0.1.33 |
Capsule Events
事件名称 | 说明 | 参数 | 最低版本 |
---|---|---|---|
back | 点击返回按钮时触发 | - | 0.1.33 |
back-home | 点击返回首页按钮时触发 | - | 0.1.33 |
Slot
名称 | 说明 | 最低版本 |
---|---|---|
capsule | 自定义胶囊(当存在胶囊时,left不生效) | 0.1.33 |
left | 左侧内容 | 0.1.33 |
title | 标题内容 | 0.1.33 |
right | 右侧内容 | 0.1.33 |
外部样式类
类名 | 说明 | 最低版本 |
---|---|---|
custom-class | 根节点样式类 | 0.1.33 |
custom-style | 根节点样式 | 0.1.33 |