NavBar 状态栏

使用指南

在 Taro 文件中引入组件

import { ZoNavBar } from '@lylb/tzo-ui';

组件依赖的样式文件（仅按需引用时需要）

@import '~@lylb/tzo-ui/dist/style/components/nav-bar.scss';

一般用法

import Taro from '@tarojs/taro';
import { ZoNavBar } from '@lylb/tzo-ui';
export default class Index extends Taro.Component {
  constructor() {
    super(...arguments);
    this.state = {
      border: false,
      needPlaceholder: false,
      showCustom: false,
      title: '走路打卡',
    };
  }
  static config = {
    navigationStyle: 'custom',
  };
  iconClick = (e) => {
    console.log('点击图标', e);
  };
  customDom() {
    return (
      <View className="custom_con">
        <Image src={logo} mode="scaleToFill"></Image>
      </View>
    );
  }
  render () {
    const {border,needPlaceholder,title}
    return (
        <ZoNavBar
          border={border}
          needPlaceholder={needPlaceholder}
          onClick={this.iconClick}
          title={title}
        >
          {showCustom && this.customDom()}
        </ZoNavBar>
    )
  }
}

左上角图标点击事件逻辑说明

事件逻辑判断按照以下顺序执行！

• 当showLeftIcon（是否显示图标）为false
  • 左上角无反应
• 当defaultIconEvent（是否触发图标默认点击事件）为false
  • 当onClick函数存在 --- 执行 onClick事件
  • 当onClick函数不存在 --- 图标点击无反应
• 当页面历史栈有上一页（表明能返回）
  • backPagePath设置 --- 跳转路径backPagePath
  • backPagePath为空 --- 默认点击返回上一页
• 当页面历史栈没有上一页（只能返回首页）
  • homePagePath设置 --- 跳转路径homePagePath
  • homePagePath为默认值 --- 返回/pages/index/index(页面如果不存在则点击无反应)

特殊场景需求说明

1. 不论是home图标还是返回图标点击全部返回特定路径

例如特定路径为 /pages/index/index

配置方法：

• 设置backPagePath和homePagePath都设置成/pages/index/index

2. 始终显示返回图标并且点击全部返回特定路径

例如特定路径为 /pages/index/index

配置方法：

方法一：

• 设置alwaysShowBack为true
• 设置backPagePath和homePagePath都设置成/pages/index/index

方法二：

• 设置alwaysShowBack为true
• 设置defaultIconEvent为false
• 绑定onClick点击事件
  • 自行处理跳转特定页面onclick={() => {Taro.redirectTo({url:/pages/index/index})}}

3. 始终显示返回图标并且遵循原逻辑

配置方法：

• 设置alwaysShowBack为true

最终呈现：

• 有上一页和无上一页都显示返回图标
• 有上一页
  • 点击返回上一页
• 无上一页
  • 点击返回homePagePath路径页

参数

参数注意事项

homePagePath请根据项目自行配置，默认值仅做参考！！！

customIcon参数Taro3有效!!!

0.0.4 版本新增属性

事件