Papayaui

Appearance

NavBar ​

基础用法 ​

html

<!-- 默认开启刘海处的填充，此为示例，为了美观，设置为关闭，实际开发通常无需设置 -->
<pa-nav-bar title="页面标题" :safe-area-inset-top="false" />

自定义 ​

html

<pa-nav-bar :safe-area-inset-top="false">
  <view class="flex items-center justify-center height-full">
    <text>页面标题</text>
    <pa-button class="ml-15" size="small">按钮</pa-button>
  </view>
</pa-nav-bar>

左侧图标 ​

html

<pa-nav-bar title="页面标题" left-menu="left" :safe-area-inset-top="false" @menu-click="onBack" />
ts

const onBack = () => {
  uni.navigateBack()
}

胶囊菜单 ​

html

<pa-nav-bar
  title="页面标题"
  :left-menu="['left', 'home']"
  :safe-area-inset-top="false"
  @menu-click="onMenuClick"
/>
ts

const onMenuClick = (index: number) => {
  uni.showToast({
    icon: 'none',
    title: `点击第${index}个`,
  })
}

黑色主题 ​

html

<pa-nav-bar
  title="页面标题"
  bg-color="#000"
  theme="white"
  :left-menu="['left', 'search']"
  :safe-area-inset-top="false"
  @menu-click="onMenuClick"
/>
ts

const onMenuClick = (index: number) => {
  uni.showToast({
    icon: 'none',
    title: `点击第${index}个`,
  })
}
参数说明类型默认值
title标题string'标题'
bgColor背景色string'#fff'
theme主题样式'black'|'white''black'
leftMenu左侧返回按钮或胶囊菜单string|[string,string]-
safeAreaInsetTop是否开启顶部安全区适配booleantrue
事件名参数
menuClick(index: number)
名称说明

样式变量 ​

🙈