更新记录

1.3.1（2026-10-27）

修复

• 修复蒸汽模式不支持选项式 API 的编译报错。
• 使用 ref、computed、watch 和组合式生命周期保留原有参数默认值、样式计算、按压回弹、导航选择事件及卸载清理；导航栏改用模板 ref 获取内部元素。
• 通过 defineExpose 显式暴露原有方法，保留父组件通过 ref 调用方法的用法。
• 显式声明 click 事件，避免 Web 下手动派发与根节点原生事件透传造成重复回调，禁用时不触发点击回调。
• 导航栏仅在 Android VDOM 模式直接访问原生 View；蒸汽模式保留触摸事件处理和 lock-scroll 通知，供父级控制滚动。
• x 容器将外层底色、阴影和缩放与内层圆角裁剪分开，各绘制层显式同步 radius；导航滑块高光同步滑块圆角，避免仅依赖父级裁剪。
• 修复 x 导航栏固定项宽场景的 flex: 0 导致项宽收缩，改为显式设置 flexGrow: 0 / flexShrink: 0；导航外层允许阴影溢出，保留原有测量、点击及拖动逻辑。
• 修复 x 导航栏 Android Kotlin 编译时的 emitSelection 前向引用及 itemWidth / disabled 监听源类型推导错误；

1.3.0（2026-10-23）

优化

• 玻璃绘制从 8 层收成模糊、底板、高光 3 层。静止时不挂 transform，背景模糊可以透出来。
• H5 折射滤镜去掉色散矩阵链，色边改在高光层绘制。
• 演示页重构：可拖动玻璃、极光 / 网格 / 落日、折射 / 模糊 / 高光、按压、导航、三种材质、性能档。背景场景属于演示页，不是插件能力。
• 修复 x Demo 卡片拖动卡顿及带动页面滚动：按下时同步锁定原生滚动，移除异步测量与逐次布局更新，合并移动事件后直接更新卡片 transform。
• 修复 x 导航滑块没有滑动过渡：按实际宽度计算 transform 位移，支持点击切换及横向拖动跟随，松手后吸附选项；纵向手势继续滚动页面。

性能档

同一套参数，三档只改变采样，不增加新接口。

各端差异

• H5：backdrop-filter 模糊，Q2 / Q3 才有 SVG 背景弯折和色散。Q1 只有高光和模糊。
• App-vue：同一套 Vue 组件。模糊取决于 WebView 是否支持 backdrop-filter。折射位移和 Q3 色散不在 App 上执行，折射参数主要改变边缘亮度。Q1 / Q2 / Q3 外观接近。
• nvue / uni-app x：拟态降级，使用透明度、边框、高光和缩放。没有像素折射，也没有 SVG 滤镜。

1.2.4（2026-09-01）

• 修复uniapp x 兼容问题
• Demo 图片迁移到插件 static 目录并使用模块绝对路径，保证 Android 打包后可访问。

平台兼容性

uni-app(5.07)

uni-app x(5.07)

LF Glass 液态玻璃

插件地址：https://ext.dcloud.net.cn/plugin?id=27813

翎赋 lf-glass：透明液态玻璃组件 + 玻璃导航栏。
统一 API，按平台渐进增强：H5 最完整，App-vue 次之，uni-app x / nvue 稳定拟态降级。

当前版本：1.3.1

组件选择

平台兼容

图例：√ 已验证；u 未充分验证；- 本版不支持。视觉按端渐进增强，不是像素级同渲染。

特性

Android 的 uni-app x Demo 与传统 Demo 使用相同布局和场景配色。极光、网格、落日及各展示区的渐变由 Demo 内的原生 Canvas 绘制，不依赖生成脚本或背景图片；这些场景装饰不属于玻璃组件的渲染能力。

• 色调：tint / tintColor / intensity
• 光学：折射率、厚度、bezel、高光角度/饱和度、色散
• Q 弹：弹簧缩放（easingType="spring"），可由 scaleDuration 推导手感
• 性能档：quality 1 轻量 / 2 均衡 / 3 细腻。列表和导航栏用 1
• 导航栏：轻量 thumb + 真实宽度定位，支持文字/图片 icon
• 事件：ready / error / click
• 无第三方依赖

安装

将插件放入：

uni_modules/lf-glass

开启 easycom / uni_modules 自动扫描后可直接使用组件标签。也可手动引入：

import LfGlass from '@/uni_modules/lf-glass/components/lf-glass/lf-glass.vue'
import LfGlassNavbar from '@/uni_modules/lf-glass/components/lf-glass-navbar/lf-glass-navbar.vue'

快速上手

<lf-glass
  size="card"
  tint="clear"
  intensity="medium"
  :radius="24"
  :quality="2"
  :refractive-index="1.35"
  :glass-thickness="160"
  :bezel-width="20"
  :specular-angle="60"
  :scale-multiplier="1.12"
  :scale-duration="380"
  easing-type="spring"
>
  <view>液态玻璃</view>
</lf-glass>

导航栏

<lf-glass-navbar
  v-model="current"
  :items="items"
  :height="60"
  :quality="1"
  tint="dark"
/>

const current = ref(0)
const items = [
  { id: 'home', label: '首页' },
  { id: 'list', label: '发现', icon: '/static/tab/list.png' },
  { id: 'mine', label: '我的', icon: '我' }
]

icon 支持：

• 图片：http(s)://、/ 本地路径、data:image、常见图片后缀
• 其他字符串：按文本图标渲染

uni-app x

使用 lf-glass-x / lf-glass-navbar-x。从 1.3.1 起，两个组件均采用 <script setup lang="uts">，可用于蒸汽模式的组合式页面，也保留 VDOM 用法。蒸汽模式要求引用组件的页面及其他子组件同样使用 script setup，不能混入选项式 <script>。参见 DCloud 蒸汽模式说明。

<template>
  <lf-glass-x tint="dark" intensity="medium" :radius="20" :quality="1">
    <text>Glass X</text>
  </lf-glass-x>
</template>

<script setup lang="uts">
import LfGlassX from '@/uni_modules/lf-glass/components/lf-glass-x/lf-glass-x.uvue'
</script>

导航栏在横向拖动开始/结束时触发 lock-scroll（true / false），嵌在 scroll-view 中时可用它控制父级 scroll-y。蒸汽模式下组件不会直接调用 Android getAndroidView()。

<template>
  <scroll-view :scroll-y="!navSliding" style="height: 400px;">
    <lf-glass-navbar-x v-model="current" :items="items" @lock-scroll="onLockScroll" />
  </scroll-view>
</template>

<script setup lang="uts">
import LfGlassNavbarX from '@/uni_modules/lf-glass/components/lf-glass-navbar-x/lf-glass-navbar-x.uvue'

const current = ref(0)
const navSliding = ref(false)
const items = [
  { label: '首页', icon: '⌂' },
  { label: '我的', icon: '我' }
] as UTSJSONObject[]

function onLockScroll(locked: boolean) {
  navSliding.value = locked
}
</script>

本次迁移覆盖插件的两个 x 组件；仓库 app-x 运行基座与玻璃演示页仍有选项式代码，尚未整体迁移为蒸汽模式。

迁移兼容边界：原有组件方法通过 defineExpose 保留 ref 调用；组件内部状态（例如 scaleValue、current）不作为公开实例字段保证兼容。Web 下 click 现在只触发组件事件一次，避免旧版原生事件透传造成的重复回调；禁用时不触发。

圆角设置

容器和导航栏统一通过数值属性 radius 设置圆角，例如 :radius="24"；动态修改该属性会同步更新绘制层和裁剪层。外部 style/class 可继续设置尺寸和布局，不作为覆盖内部圆角的接口。

各实现保持原有尺寸语义：

x 容器将外层底色、阴影、缩放与内层圆角裁剪分开，边框和高光层显式使用同一圆角，导航滑块的高光也同步滑块圆角。这样避免仅靠父级裁剪或圆角继承绘制四角。iOS 原生端存在阴影与 overflow: hidden 同层设置的已知冲突，属于这次处理的兼容风险；尚不能据此认定反馈已在设备上复现。DCloud 说明

需要显示玻璃外部阴影时，父容器也应允许 overflow: visible；父级自身设置了 overflow: hidden，仍会裁掉超出父级的阴影，这与组件内部的圆角裁剪是两回事。

关键节点保持普通视图，不支持为这两个 x 组件额外启用 flatten。蒸汽模式与 VDOM 使用同一套组件实现，均需完成目标端验证。

lf-glass Props

基础

光学

quality 说明：

App-vue 没有 SVG 折射，三档外观接近。nvue / uni-app x 为拟态，不随这三档产生像素折射。

Q 弹

lf-glass-navbar Props

Events

Demo

在 pages.json 顶层 pages 添加：

{
  "path": "uni_modules/lf-glass/pages/demo/demo",
  "style": {
    "navigationBarTitleText": "LF Glass",
    "navigationBarBackgroundColor": "#0b1218",
    "navigationBarTextStyle": "white"
  }
}

跳转：

uni.navigateTo({
  url: '/uni_modules/lf-glass/pages/demo/demo'
})

注意事项

1. 玻璃需要背后有图片、渐变或复杂背景，纯色底效果弱。
2. H5 在 Q2 / Q3 才有背景弯折和色散。App-vue 的模糊取决于 WebView 的 backdrop-filter，折射参数主要改变边缘亮度。
3. nvue / uni-app x 为拟态降级，参数映射到透明度、边框、高光与缩放，不会出现 H5 级折射。Q1 / Q2 / Q3 在这两端不产生像素级差异。
4. 列表、Tab、导航栏请优先 quality=1，避免多实例 SVG 滤镜拖慢页面。
5. 导航栏窄屏建议 items ≤ 5；thumb 会按实测宽度定位。
6. edgePreset 只调边框/高光权重，不会覆盖你传入的 opacity / tint。

问题反馈

插件市场：https://ext.dcloud.net.cn/plugin?id=27813

• 邮箱：lingfugroup@gmail.com