更新记录

0.0.1（2026-04-20）

• ✨ 新增液态玻璃组件 l-liquid-glass

平台兼容性

uni-app(5.0)

uni-app x(5.0)

lime-liquid-glass 液态玻璃组件

uni-app 液态玻璃效果组件，Web 端和 uni-app App 端完整支持。

特性

• ✨ Q弹效果：支持弹簧物理动画的缩放交互
• 🎨 丰富配置：支持边框、高光、折射率等多种参数定制
• 🧭 导航栏组件：内置液态玻璃效果的导航栏组件

插件依赖：lime-shared

平台兼容性

安装方法

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

l-liquid-glass 液态玻璃组件

快速上手

<l-liquid-glass
  :blur="20"
  :radius="24"
  background-color="rgba(255,255,255,0.12)"
>
  <!-- 你的内容 -->
</l-liquid-glass>

Q弹效果示例

<l-liquid-glass
  ref="glassRef"
  :width="200"
  :height="60"
  :radius="30"
  :scale-multiplier="1.2"
  :scale-duration="400"
  easing-type="spring"
  background-color="rgba(255,255,255,0.4)"
>
  <text>点击我试试</text>
</l-liquid-glass>

完整配置示例

<l-liquid-glass
  :width="200"
  :height="80"
  :radius="40"
  :blur="2"
  :opacity="0.08"
  background-color="rgba(255,255,255,0.2)"
  :border-width="1.5"
  border-color="rgba(112,112,112,0.38)"
  shadow-color="rgba(0, 0, 0, 0.16) 0px 4px 9px"
  :bezel-width="30"
  :glass-thickness="190"
  :refractive-index="1.3"
  bezel-type="convex_squircle"
  :scale-ratio="0.4"
  :specular-opacity="1"
  :specular-saturation="19"
  :specular-angle="60"
  shape="pill"
  :corner-radius="1.0"
  :squircle-exponent="4"
  :quality="2"
  :scalable="true"
  :shadow-adaptive="true"
  :scale-multiplier="1.1"
  :scale-duration="400"
  easing-type="spring"
>
  <text>液态玻璃内容</text>
</l-liquid-glass>

快速预览

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

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

插件标签说明

API文档

Props 属性说明

Events 事件

l-liquid-glass-navbar 液态玻璃导航栏组件

液态玻璃效果的导航栏，支持点击和滑动切换，拥有弹簧物理动画效果。

快速上手

<l-liquid-glass-navbar
  v-model="currentIndex"
  :items="navItems"
/>

const currentIndex = ref(0)
const navItems = ref([
  { id: 'home', label: '首页' },
  { id: 'category', label: '分类' },
  { id: 'cart', label: '购物车' },
  { id: 'mine', label: '我的' }
])

带图标的导航栏

<l-liquid-glass-navbar
  v-model="currentIndex"
  :items="navItems"
  :icon-size="20"
  :font-size="12"
  icon-color="#ffffff"
  text-color="#ffffff"
  icon-color-active="#ff6b00"
  text-color-active="#ff6b00"
/>

const currentIndex = ref(0)
const navItems = ref([
  { id: 'home', label: '首页', icon: 'home' },
  { id: 'category', label: '分类', icon: 'category' },
  { id: 'cart', label: '购物车', icon: 'cart' },
  { id: 'mine', label: '我的', icon: 'mine' }
])

自定义尺寸

<l-liquid-glass-navbar
  v-model="currentIndex"
  :items="navItems"
  :height="60"
  :item-width="90"
  :thumb-height="56"
  :bezel-width="10"
  :bazel-width-bg="28"
  :glass-thickness="120"
  :thumb-scale="1.35"
  :thumb-scale-y="1.15"
/>

使用 CSS 变量定制

<view class="custom-nav">
  <l-liquid-glass-navbar
    v-model="currentIndex"
    :items="navItems"
  />
</view>

.custom-nav {
  --l-liquid-glass-navbar-icon-size: 22px;
  --l-liquid-glass-navbar-font-size: 13px;
  --l-liquid-glass-navbar-icon-color: #cccccc;
  --l-liquid-glass-navbar-text-color: #cccccc;
  --l-liquid-glass-navbar-icon-color-active: #00ff00;
  --l-liquid-glass-navbar-text-color-active: #00ff00;
  --l-liquid-glass-navbar-gap: 8px;
  --l-liquid-glass-navbar-transition: 0.2s ease;
}

完整配置示例

<l-liquid-glass-navbar
  v-model="currentIndex"
  :items="navItems"
  :height="60"
  :item-width="90"
  :thumb-height="55"
  :bezel-width="10"
  :bazel-width-bg="25"
  :glass-thickness="120"
  :thumb-scale="1.35"
  :thumb-scale-y="1.15"
  :icon-size="22"
  icon-color="#ffffff"
  icon-color-active="#ff6b00"
  :font-size="13"
  text-color="#ffffff"
  text-color-active="#ff6b00"
  :gap="6"
  transition="0.2s ease"
/>

API文档

Props 属性说明

NavItem 类型

interface NavItem {
  id: string
  label: string
  icon?: string
}

Events 事件

主题定制

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

导航栏 CSS 变量

支持与赞赏

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

支付宝赞助	微信赞助