华玥组件库 · 为 uni-app 打造的新一代高效组件解决方案

前言

在移动端开发中，我们经常遇到这样的场景：瀑布流布局需要手动计算高度、电子签名功能要自己实现 Canvas、数字滚动动画要写一堆 CSS 动画代码…这些看似简单的需求，实际上却消耗了大量的开发时间。

最近在研究 Hy Design Uni 组件库时，发现了一些让人眼前一亮的特色组件。这些组件不仅解决了常见的开发痛点，而且在性能优化和用户体验上都有很好的表现。今天就来和大家分享一下这些组件的特点和实际应用场景。

一、瀑布流组件：真正的组件化实现

瀑布流组件

在这里插入图片描述

痛点分析

瀑布流布局在电商、内容类应用中非常常见，但实现起来却有不少坑：

• 需要手动计算每个卡片的高度
• 左右两列的高度要动态平衡
• 图片加载完成后要重新计算布局
• 性能优化不好容易卡顿

市面上大多数组件库的瀑布流组件，要么需要开发者手动处理高度计算，要么就是性能不够理想。

创新实现

Hy Design Uni 的瀑布流组件采用了真正组件化的设计思路：

<hy-waterfall :data="list">
  <template #left="{ leftList }">
    <view v-for="item in leftList" :key="item.id">
      <image :src="item.image" mode="widthFix"></image>
      <text>{{ item.title }}</text>
    </view>
  </template>
  <template #right="{ rightList }">
    <view v-for="item in rightList" :key="item.id">
      <image :src="item.image" mode="widthFix"></image>
      <text>{{ item.title }}</text>
    </view>
  </template>
</hy-waterfall>

核心优势：

1. 作用域插槽设计：开发者只需要关注内容渲染，左右两列的高度分配完全自动化
2. 性能优化：内部做了 DOM 操作优化，减少不必要的重新渲染
3. 跨平台兼容：小程序、H5、App 三端统一，无需担心兼容性问题

实际应用场景

• 电商商品列表：不同尺寸的商品图片自动平衡布局
• 内容社区：图文混排的内容卡片展示
• 图片墙：用户上传的图片自动排列

性能对比

二、电子签名组件：专业级签名体验

电子签名组件

在这里插入图片描述

痛点分析

电子签名在很多业务场景中都是刚需，比如：

• 合同签署
• 订单确认
• 审批流程
• 收据确认

但实现一个流畅的签名功能并不简单，需要处理 Canvas 绘制、历史记录、撤销重做、图片导出等一系列问题。

创新实现

Hy Design Uni 的签名组件提供了完整的解决方案：

<hy-signature
  :penColor="'#000000'"
  :penSize="2"
  :backgroundColor="'#ffffff'"
  @confirm="handleConfirm"
  @clear="handleClear"
/>

核心功能：

1. 平滑绘制：基于 Canvas 的高性能绘制，笔触流畅自然
2. 历史记录管理：支持撤销、恢复操作，用户体验更好
3. 丰富的自定义选项：画笔颜色、粗细、背景色都可以配置
4. 图片导出：一键导出签名为图片，方便保存和上传

技术亮点

• Canvas 优化：使用 requestAnimationFrame 优化绘制性能
• 历史记录栈：合理控制内存占用，支持多步撤销
• 跨平台兼容：H5、小程序、App 统一 API

实际应用场景

• 电子合同：在线签署合同，无需打印
• 审批流程：领导审批时电子签名确认
• 订单确认：用户确认订单时签名
• 收据确认：快递签收时的电子签名

与传统方案对比

三、数字滚动组件：视觉冲击力十足的数据展示

数字滚动组件

在这里插入图片描述

痛点分析

在数据可视化、统计报表等场景中，数字的展示方式直接影响用户的视觉体验。简单的数字变化很难吸引眼球，而复杂的动画又容易影响性能。

市面上常见的数字动画方案：

• JS 递增：简单但效果一般，性能不佳
• CSS 动画：效果有限，难以实现复杂效果
• Canvas 绘制：性能好但开发成本高

创新实现

Hy Design Uni 的数字滚动组件采用了创新的 3D 滚动效果：

<hy-rolling-num
  :startVal="0"
  :endVal="12345.67"
  :duration="2"
  :decimals="2"
  :separator=","
/>

核心优势：

1. 3D 滚动效果：数字像老虎机一样滚动，视觉冲击力强
2. CSS Transform 实现：使用 GPU 加速，性能优异
3. 完整的小数支持：支持任意位数的小数显示
4. 千分位分隔符：大数字更易读

技术原理

组件内部使用 CSS Transform 实现数字滚动：

.hy-rolling-num__column--wrapper {
  transform: translateY(-300%);
  transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

这种实现方式的优势：

• GPU 加速：不占用主线程，动画流畅
• 性能优异：60fps 流畅运行
• 内存占用低：不需要频繁操作 DOM

实际应用场景

• 数据大屏：实时数据展示，增强视觉效果
• 统计报表：关键指标展示，吸引注意力
• 营销活动：倒计时、销售额展示
• 金融应用：账户余额、收益展示

性能对比

四、水印组件：高性能的版权保护方案

在这里插入图片描述

痛点分析

水印在内容保护、品牌展示中非常重要，但实现一个高性能的水印组件并不容易：

• 需要支持文字和图片两种类型
• 要考虑旋转角度、透明度、间距等参数
• 全屏水印需要考虑性能问题
• 不同平台的 Canvas 实现有差异

市面上大多数组件库要么不支持水印，要么功能比较简单。

创新实现

Hy Design Uni 的水印组件提供了完整的解决方案：

<hy-watermark
  :content="水印内容"
  :image="logoUrl"
  :rotate="-30"
  :opacity="0.15"
  :fullScreen="true"
/>

核心功能：

1. 文字和图片水印：支持两种类型，灵活配置
2. 离屏 Canvas 技术：性能优化，不影响主线程
3. 自动换行：长文本自动换行，无需手动计算
4. 多平台兼容：H5、小程序、App 统一 API

技术亮点

离屏 Canvas 优化：

// 使用离屏 Canvas 预渲染水印
const offscreenCanvas = uni.createOffscreenCanvas({
  type: '2d',
  width: width,
  height: height
})

这种实现方式的优势：

• 性能优异：离屏渲染不影响主线程
• 内存优化：渲染完成后释放资源
• 跨平台兼容：自动适配不同平台的 Canvas API

实际应用场景

• 版权保护：在图片、文档中添加水印，防止盗用
• 品牌宣传：在页面中展示品牌标识
• 安全防护：在敏感信息页面添加水印，防止截图泄露
• 内部系统：在内部文档中添加水印，防止外传

性能对比

五、悬浮按钮组件：智能交互设计

悬浮按钮组件

在这里插入图片描述

痛点分析

悬浮按钮是移动应用中常见的交互元素，但实现一个体验好的悬浮按钮并不简单：

• 需要支持拖拽移动
• 要考虑自动吸附到屏幕边缘
• 展开菜单的动画效果
• 不同屏幕尺寸的适配
• 防止遮挡重要内容

市面上大多数组件库的悬浮按钮功能比较基础，要么不支持拖拽，要么交互体验一般。

创新实现

Hy Design Uni 的悬浮按钮组件提供了智能化的交互设计：

<hy-float-button
  :draggable="true"
  :position="'right-bottom'"
  :menus="['首页', '我的', '设置']"
  @click="handleClick"
  @clickItem="handleItemClick"
/>

核心功能：

1. 拖拽移动：用户可以自由拖拽按钮位置
2. 自动吸附：松手后自动吸附到屏幕边缘，体验更流畅
3. 展开菜单：一个按钮承载多个操作，节省页面空间
4. 8 个方向定位：支持 8 个方向的初始位置配置

技术亮点

智能吸附算法：

// 计算最近的屏幕边缘
const nearestEdge = Math.min(
  x,
  screenWidth - x,
  y,
  screenHeight - y
)

这种实现方式的优势：

• 交互流畅：拖拽和吸附动画自然流畅
• 智能定位：自动选择最近的边缘，用户体验好
• 防遮挡：避免遮挡重要内容

实际应用场景

• 快捷操作：提供常用功能的快捷入口
• 客服入口：悬浮客服按钮，随时联系客服
• 功能导航：展开菜单提供多个功能入口
• 回到顶部：长页面快速回到顶部

用户体验对比

六、优惠券组件：电商营销必备神器

优惠券组件

在这里插入图片描述

痛点分析

优惠券是电商应用中最重要的营销工具之一，但实现一个功能完善的优惠券组件并不简单：

• 需要支持多种优惠券类型（满减券、折扣券、无门槛券）
• 要考虑不同的状态展示（可用、已使用、已过期）
• 优惠券的视觉设计要吸引人
• 要支持自定义内容展示
• 不同平台的样式适配

市面上大多数组件库要么不支持优惠券，要么功能比较单一，难以满足复杂的营销场景。

创新实现

Hy Design Uni 的优惠券组件提供了完整的解决方案：

<hy-coupon
  :type="'moneyOff'"
  :amount="100"
  :title="'满1000减100'"
  :description="'仅限新用户使用'"
  :startDate="'2024-01-01'"
  :endDate="'2024-12-31'"
  :status="'available'"
  @click="handleClick"
  @used="handleUsed"
/>

核心功能：

1. 多种优惠券类型：支持满减券、折扣券、无门槛券三种类型
2. 灵活的状态管理：支持可用、已使用、已过期等多种状态
3. 丰富的自定义选项：支持自定义左右两侧内容、按钮样式
4. 精美的视觉效果：支持阴影效果、圆角设计、颜色自定义

技术亮点

智能状态判断：

const isDisable = computed(() => props.disabledStatus.includes(props.status))

这种实现方式的优势：

• 类型安全：通过计算属性自动判断禁用状态
• 灵活配置：支持自定义禁用状态列表
• 易于维护：状态管理清晰，易于扩展

实际应用场景

• 电商促销：满减券、折扣券、新人券等
• 会员权益：会员专属优惠券
• 活动营销：节日活动优惠券
• 用户激励：签到送券、邀请送券

与传统方案对比

七、价格组件：专业的金额展示方案

价格组件

在这里插入图片描述

痛点分析

在电商、金融等应用中，价格的展示方式直接影响用户的视觉体验和购买决策：

• 需要突出显示整数部分，小数部分要小一些
• 要支持千分位分隔符，让大数字更易读
• 不同场景需要不同的货币符号
• 要支持自定义颜色、大小、粗细
• 要考虑不同平台的字体渲染差异

市面上大多数组件库的价格组件功能比较基础，要么不支持千分位，要么样式不够灵活。

创新实现

Hy Design Uni 的价格组件提供了专业的解决方案：

<hy-price
  :text="12345.67"
  :symbol="'¥'"
  :size="24"
  :ratio="1.5"
  :color="'#ff0000'"
  :weight="'bold'"
/>

核心功能：

1. 差异化字体大小：整数部分大，小数部分小，突出重点
2. 千分位分隔符：自动格式化大数字，更易读
3. 丰富的自定义选项：支持货币符号、颜色、大小、粗细等
4. 灵活的样式控制：支持斜体、自定义比例等

技术亮点

智能价格格式化：

const priceOne = computed(() => {
  let value = typeof props.text === 'string' ? props.text : props.text.toString()

  // 格式化整数部分为千分位
  const formatValue = (val: string) => {
    return val.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  }

  if (/\./g.test(value)) {
    const [integer, decimal] = value.split('.')
    return [formatValue(integer), decimal]
  } else {
    return [formatValue(value), '000000']
  }
})

这种实现方式的优势：

• 自动格式化：自动识别整数和小数部分
• 千分位支持：使用正则表达式实现千分位分隔
• 性能优异：使用计算属性，避免重复计算

实际应用场景

• 电商商品：商品价格展示
• 订单详情：订单金额展示
• 金融应用：账户余额、收益展示
• 数据报表：财务数据展示

与传统方案对比

八、提交栏组件：商品详情页必备

提交栏组件

在这里插入图片描述

痛点分析

提交栏是商品详情页、购物车等页面的核心交互元素，但实现一个体验好的提交栏并不简单：

• 需要支持左侧图标菜单（客服、收藏等）
• 要支持左右两个按钮（加入购物车、立即购买）
• 要考虑按钮的加载状态
• 要支持固定定位和自适应布局
• 要支持徽标显示（购物车数量）

市面上大多数组件库的提交栏功能比较基础，要么不支持左侧菜单，要么交互体验一般。

创新实现

Hy Design Uni 的提交栏组件提供了完整的解决方案：

<hy-submit-bar
  :menus="[
    { icon: 'service', text: '客服', badge: { value: 0 } },
    { icon: 'star', text: '收藏', badge: { value: 1 } }
  ]"
  :showLeftBtn="true"
  :showRightBtn="true"
  :leftBtnText="'加入购物车'"
  :rightBtnText="'立即购买'"
  @menuClick="handleMenuClick"
  @click="handleSubmit"
/>

核心功能：

1. 左侧图标菜单：支持多个图标菜单，带徽标显示
2. 双按钮设计：支持左右两个按钮，可独立控制
3. 加载状态：支持按钮加载状态，提升用户体验
4. 灵活的布局：支持固定定位、自定义形状

技术亮点

智能按钮样式计算：

const leftBtnStyle = computed(() => {
  const style: CSSProperties = {
    background: props.leftBtnColor,
    color: props.textColor
  }
  if (!props.showRightBtn) {
    style.flex = 1
    if (props.shape === 'circle') {
      style.borderRadius = '100px'
    } else {
      style.borderRadius = '2px'
    }
  } else {
    if (props.shape === 'circle') {
      style.borderRadius = '100px 0 0 100px'
    } else {
      style.borderRadius = '2px 0 0 2px'
    }
  }
  return style
})

这种实现方式的优势：

• 智能布局：根据按钮数量自动调整样式
• 灵活配置：支持多种形状和颜色配置
• 易于维护：样式计算逻辑清晰

实际应用场景

• 商品详情页：加入购物车、立即购买
• 购物车：结算、删除
• 订单确认页：提交订单、取消订单
• 表单提交页：保存、提交

与传统方案对比

九、表格组件：移动端高性能表格

表格组件

在这里插入图片描述

痛点分析

表格是数据展示的重要组件，但在移动端实现一个高性能的表格并不简单：

• 需要支持固定列（左侧、右侧）
• 要支持横向和纵向滚动
• 要考虑性能问题，避免卡顿
• 要支持排序功能
• 要支持自定义单元格内容
• 要考虑不同屏幕尺寸的适配

市面上大多数组件库的表格组件要么功能不完整，要么性能不够理想，难以满足复杂的数据展示需求。

创新实现

Hy Design Uni 的表格组件提供了完整的解决方案：

<hy-table
  :columns="columns"
  :data="tableData"
  :height="500"
  :showHeader="true"
  :stripe="true"
  @sort-change="handleSortChange"
  @cell-click="handleCellClick"
>
  <template #default="{ row, col }">
    <!-- 自定义单元格内容 -->
  </template>
</hy-table>

核心功能：

1. 固定列支持：支持左侧和右侧固定列，横向滚动时固定列不动
2. 双向滚动：支持横向和纵向滚动，滚动同步
3. 排序功能：支持列排序，升序降序切换
4. 斑马纹：支持斑马纹样式，提升可读性
5. 自定义插槽：支持自定义表头和单元格内容
6. 性能优化：使用防抖和节流优化滚动性能

技术亮点

滚动同步优化：

const onScroll = async (e: any) => {
  if (isUpdatingScroll.value) return

  const newScrollTop = e.detail.scrollTop
  isUpdatingScroll.value = true
  if (Math.abs(newScrollTop - scrollTop.value) > 1) {
    scrollTop.value = newScrollTop
  }

  // 在下一个事件循环重置标志位
  await sleep(SLEEP_TIME)
  isUpdatingScroll.value = false
}

这种实现方式的优势：

• 防止循环触发：使用标志位防止滚动循环触发
• 减少抖动：使用阈值减少频繁更新
• 性能优异：使用异步处理，不阻塞主线程

实际应用场景

• 数据报表：财务报表、销售报表
• 订单列表：订单详情、物流信息
• 用户管理：用户列表、权限管理
• 库存管理：商品库存、出入库记录

与传统方案对比

十、性能优化总结

这 5 个特色组件在性能优化上都有很好的表现，主要体现在以下几个方面：

1. 减少 DOM 操作

• 瀑布流组件使用作用域插槽，减少不必要的 DOM 操作
• 数字滚动组件使用 CSS Transform，避免 JS 频繁操作 DOM
• 水印组件使用离屏 Canvas，减少主线程压力

2. 使用 CSS3 硬件加速

• 数字滚动组件使用 CSS Transform 实现 3D 效果
• 悬浮按钮组件使用 CSS 过渡实现流畅动画
• 所有动画都经过性能优化，保证 60fps 流畅运行

3. 优化内存管理

• 签名组件支持历史记录管理，合理控制内存占用
• 瀑布流组件自动回收不可见元素
• 滚动组件使用虚拟化技术，减少内存占用

4. 跨平台兼容

• 所有组件都经过多端测试，保证兼容性
• 统一的 API 设计，降低学习成本
• 自动适配不同平台的特性

十一、开发效率提升

使用这些特色组件，可以显著提升开发效率：

总体效率提升：300% 以上

十二、总结

Hy Design Uni 的这些特色组件，不仅解决了常见的开发痛点，而且在性能优化和用户体验上都有很好的表现。

核心优势

1. 技术创新：每个组件都有独特的技术亮点
2. 性能优异：经过深度优化，保证流畅体验
3. 开发高效：开箱即用，大幅提升开发效率
4. 跨平台兼容：统一 API，多端一致体验

适用场景

• 电商平台：瀑布流、优惠券、数字滚动
• 办公应用：电子签名、水印、悬浮按钮
• 数据展示：数字滚动、瀑布流
• 内容社区：瀑布流、水印
• 移动端应用：悬浮按钮、电子签名

选择建议

如果你的项目需要这些功能，强烈建议使用 Hy Design Uni 的特色组件。不仅可以节省大量开发时间，还能获得更好的性能和用户体验。

十三、参考资源

• 华玥组件库 官方文档
• UniApp 官方文档
• Vue 3 官方文档

如果你觉得这篇文章帮助你了，那就请给我来个 三连支持一下 ♥️

➡️ 点赞 支持一下 ➡️ 收藏 以防找不到 ➡️ 评论 我会回访你！ ➡️ 关注 不会迷路哦！

你的支持是我持续更新的动力，我们下篇更精彩！🚀🔥

👉 欢迎大家给华玥组件库star。 ✅