顶部导航

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

平台差异

App	H5	微信小程序	支付宝小程序	头条小程序
√	√	√	√	√

Props

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

Slots

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

Class

样式名称	说明
cl-topbar__icon	图标块

TIP

H5 页面刷新或者分享页时，页面栈长度只有 1。此时可以统一配置 backPath 返回的页面路径

// main.js
import cooluni from "cl-uni";

Vue.use(cooluni, {
	homePage: "/pages/index/index"
});

示例

基本用法

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

带描述

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

右侧图标

<cl-topbar title="标题">
	<view class="cl-topbar__icon" slot="append">
		<text class="cl-icon-question-fill"></text>
	</view>
</cl-topbar>

不需要返回键

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

其他颜色

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

插槽方式

<cl-topbar title="标题">
	<template slot="prepend">
		<view class="cl-topbar__icon">
			<text class="cl-icon-question"></text>
		</view>
	</template>

	<template slot="append">
		<cl-button size="mini">设置</cl-button>
	</template>
</cl-topbar>