示例仅供参考,请以真机为主

Topbar 顶部导航

自定义顶部导航,弥补原生的不足

参数

参数说明类型可选值默认值
title标题string
description描述string
show-back是否需要返回键booleantrue
back-path当页面栈只有一条时,返回的路径booleantrue
border是否需要下边框booleantrue
background-color背景颜色string#fff
color字体颜色string#000
fixed是否固定定位booleanfalse

插槽

插槽名称说明
default中间文本区域
prepend左侧插入内容
append右侧插入内容

TIP

H5 页面刷新或者分享页时,页面栈长度只有 1

示例

基本用法

<cl-topbar title="标题"></cl-topbar>

带描述

<cl-topbar title="标题" description="描述"></cl-topbar>

右侧图标

<cl-topbar title="标题">
	<template #append>
		<view class="cl-topbar__icon">
			<text class="cl-icon-warning-border"></text>
		</view>
	</template>
</cl-topbar>

不需要返回键

<cl-topbar title="标题" :show-back="false"></cl-topbar>

其他颜色

<cl-topbar title="标题" color="#fff" background-color="#000"></cl-topbar>
Last Updated: