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