NavBar 导航栏

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

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "NavBar",
  3. "usingComponents": {
  4. "wux-navbar": "../../dist/navbar/index",
  5. "wux-icon": "../../dist/icon/index"
  6. }
  7. }

示例

  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">NavBar</view>
  4. <view class="page__desc">导航栏</view>
  5. </view>
  6. <view class="page__bd">
  7. <view class="sub-title">Default</view>
  8. <wux-navbar leftText="Back" title="NavBar" rightText="Click me!" bind:click="onClick" />
  9. <view class="sub-title">Default</view>
  10. <wux-navbar theme="dark">
  11. <wux-icon slot="left" type="ios-arrow-back" size="23" />
  12. <view>导航栏</view>
  13. <wux-icon slot="right" type="ios-more" size="23" />
  14. </wux-navbar>
  15. </view>
  16. </view>
  1. Page({
  2. onClick(e) {
  3. console.log('onClick', e)
  4. if (e.detail.type === 'right') {
  5. wx.showModal({
  6. title: 'Thank you for your support!',
  7. showCancel: !1,
  8. })
  9. }
  10. },
  11. })

视频演示

NavBar

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 根节点样式类