@wines/navbar NPM

`@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`	点击事件	-