@wines/navbar

NavBar 导航栏

用于提供页面的导航能力。

在 page.json 中引入组件

{
  "navigationBarTitleText": "wux-navbar",
  "usingComponents": {
    "wux-navbar": "@wines/navbar",
    "wux-icon": "@wines/icon"
  }
}

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">NavBar</view>
		<view class="page__desc">导航栏</view>
	</view>
	<view class="page__bd">
		<view class="sub-title">Default</view>
		<wux-navbar
		 leftText="Back"
		 title="NavBar"
		 rightText="Click me!"
		 bind:click="onClick"
		/>
		<view class="sub-title">Default</view>
		<wux-navbar theme="dark">
			<wux-icon slot="left" type="ios-arrow-back" size="23" />
			<view>导航栏</view>
			<wux-icon slot="right" type="ios-more" size="23" />
		</wux-navbar>
	</view>
</view>

import './index.less';
Page({
  onClick(e) {
    console.log('onClick', e);
    if (e.detail.type === 'right') {
      void wx.showModal({
        title: 'Thank you for your support!',
        showCancel: !1,
      });
    }
  },
});

API

NavBar props

| 参数 | 类型 | 描述 | 默认值 | | ---------- | ---------- | ------------------------------------------------------------------------------------------- | ---------- | | prefixCls | string | 自定义类名前缀 | wux-navbar | | theme | string | 主题色，可选值为 light、stable、positive、calm、assertive、balanced、energized、royal、dark | light | | title | string | 标题 | - | | leftText | string | 导航左边内容 | - | | rightText | string | 导航右边内容 | - | | bind:click | function | 点击事件 | - |

NavBar slot

| 名称 | 描述 | | ----- | ------------------ | | - | 自定义标题 | | left | 自定义导航左边内容 | | right | 自定义导航右边内容 |

NavBar externalClasses

| 名称 | 描述 | | --------- | ------------ | | wux-class | 根节点样式类 |