更新记录

0.1.6（2025-12-24） 下载此版本

• fix: 修复uniapp app safeAreaInsetTop无效问题

0.1.5（2025-11-28） 下载此版本

• fix: css var可能不生效的问题

0.1.3（2025-06-16） 下载此版本

• fix: 占位初始化过慢可能导致闪一下

平台兼容性

uni-app(4.51)

uni-app x(4.61)

lime-navbar 导航栏组件

一个功能丰富的导航栏组件，用于页面顶部导航。支持标题、返回按钮、自定义胶囊按钮、搜索框等多种配置，可用于各种页面导航场景。组件提供了丰富的自定义选项，可以满足各种复杂的界面设计需求。

插件依赖：lime-style、lime-shared、lime-icon

文档链接

📚 组件详细文档请访问以下站点：

• 导航栏组件文档 - 站点1
• 导航栏组件文档 - 站点2
• 导航栏组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-navbar
2. 导入后可能需要重新编译项目
3. 在页面中使用l-navbar组件

::: tip 注意🔔 本插件依赖的【lime-svg】是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用， 若不需要删除即可 :::

代码演示

基础用法

最简单的导航栏组件用法，只需要设置标题即可。

<l-navbar title="标题文字" :fixed="false"></l-navbar>

返回上级

通过 left-arrow 属性设置显示返回箭头图标，通过 click-left 事件接收点击事件，delta 属性设置后退按钮后退层数。

<l-navbar title="标题文字" :left-arrow="true" @click-left="onClickLeft"></l-navbar>

const onClickLeft = () => {
  console.log('点击返回')
}

标题文字超出

通过 title-max-length 属性设置标题文字最大长度，超出部分将显示为省略号。

<l-navbar title="标题文字超出" :title-max-length="5" :fixed="false"></l-navbar>

自定义胶囊样式

通过 capsule 插槽自定义胶囊按钮样式。

<l-navbar title="标题文字" :fixed="false">
  <template #capsule>
    <view class="custom-capsule">
      <l-icon name="chevron-left" size="20px" class="custom-capsule__icon" />
      <view style="width: 1px;height: 20px; background-color: #ddd; margin: 0 10px;"></view>
      <l-icon name="home" size="20px" class="custom-capsule__icon" />
    </view>
  </template>
  <template #right>
    <l-icon name="ellipsis" size="24px" />
  </template>
</l-navbar>

.custom-capsule {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.custom-capsule__icon {
  position: relative;
  margin: 0;
}

带搜索导航栏

通过 left 插槽自定义左侧内容，通过 right 插槽自定义右侧内容。

<l-navbar title="标题文字" :fixed="false">
  <template #left>
    <view style="width: 80%;">
      <l-search placeholder="搜索预设文案?" shape="round"/>
    </view>
  </template>
  <template #right>
    <l-icon name="home" size="24px" />
    <view style="width: 10px;"></view>
    <l-icon name="ellipsis" size="24px" />
  </template>
</l-navbar>

自定义样式

通过 bg-color 设置背景色，color 设置文本颜色。

<l-navbar title="标题文字" :fixed="false" :left-arrow="true" bg-color="#3283ff" color="white"></l-navbar>

额外插槽

需要弹窗从顶部出现时，并且弹窗的top为navbar高度时可使用 extra 插槽。

<l-navbar>
  <template #extra="{size}">
    <l-popup v-model="visible"
      :overlayStyle="{ top: size.height+ 'px' }"
      :l-style="{ top: size.height + 'px' }"
      :position="currentPlacement" 
      :closeable="true">
      <view style="padding: 100px;"></view>
    </l-popup>
  </template>
</l-navbar>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-navbar/components/lime-navbar -->
<lime-navbar />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

Events 事件

Slots 插槽

主题定制

组件提供了以下CSS变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助