使用说明

// 按需引入需要在 app.scss 中引入对应样式 navBar.scss
import { ClNavBar } from "mp-colorui";

一般用法

颜色

<ClNavBar
  leftIcon={[
    {
      icon: "roundleftfill-copy",
      text: "返回上一页"
    }
  ]}
  bgColor="light-blue"
  title="我是标题"
  onClickLeftIcon={index => {
    Taro.navigateBack();
  }}
/>

参数说明

NavBar 参数

参数	说明	类型	可选值	默认值
bgColor	背景色	string	参考文档 默认色	white
title	中间标题	string	-	-
leftIcon	左侧图标组	leftIcon[]	详情	[]
rightIcon	右侧图标组	rightIcon[]	详情	[]

leftIcon

参数	说明	类型	可选值	默认值
icon	图标	string	参考文档 Icon-iconName	-
color	图标颜色	string	参考文档 默认色-标准色	-
text	左侧文字	string	-	-

rightIcon

参数	说明	类型	可选值	默认值
icon	图标	string	参考文档 Icon-iconName	-
color	图标颜色	string	参考文档 默认色-标准色	-

NavBar 事件

事件名称	说明	参数返回
onClickLeftIcon	点击左侧图标事件	index
onClickRightIcon	点击右侧图标事件	index

部分功能需扫码预览才能正常显示。

H5及小程序二维码