更新记录

1.0.0(2024-11-07) 下载此版本

初版


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

x-nav-bar

自定义导航栏

在使用原生导航栏时有很多不便,例如:导航栏左右两侧的内容自定义程度低,返回按钮在小程序分享页时不能跳转到主页,
需要在导航栏放置搜索框或其他自定义内容,本组件可以便捷的实现这些布局(并且对小程序的右侧胶囊按钮进行了处理)

示例

<!-- 基本使用 -->
<x-nav-bar>
    <text>标题</text>
</x-nav-bar>

<!-- 默认插槽填充剩余空间 -->
<x-nav-bar layout="fill">
    <view style="width: 100%;">
       <input style="width: 100%;" placeholder="请输入关键词" />
    </view>
    <template #right>
        <text>搜索</text>
    </template>
</x-nav-bar>

Props

属性名 说明 类型 默认值
zIndex 容器的层级 [Number, String] 9
height 高度 [String, Number] 44
padding 组件的内边距 String '0 8px'
backSize 返回按钮大小 String 24
backColor 返回按钮颜色 black,white black
backHide 是否隐藏返回按钮 Boolean false
placeholder 是否占位 Boolean true
mpSafeArea 小程序右侧安全区域 Boolean true
layout 布局方式 common(常规布局),fill(中间填充整个剩余空间) 'common'
bgColor 背景色 String '#fff'
customStyle 自定义样式 Object

Emits

事件名 说明 回调入参
innerStyle 内部样式发生改变触发 样式对象

Slots

插槽名 说明
default 导航栏中间区域
left 导航栏左侧区域
right 导航栏右侧区域 (默认处理了小程序右侧胶囊可以通过 mpSafeArea 属性禁止)

插件如果对你有帮助给个好评吧~

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问