uni-ui 组件库更新日志与使用指南

Question

uni-ui 介绍

uni-ui 是 uni-app 的扩展 UI 组件库，专注于提供高性能、全端兼容的 UI 组件，以增强 uni-app 应用的开发体验。

更新记录

版本 1.5.11（2025-08-19）

uni-data-select：新增 selected、empty、option 插槽，支持多选功能。增加属性控制选中文字换行显示、对齐位置、隐藏右侧按钮及修改边框样式，并新增 open、close、clear 事件。
uni-easyinput：修复微信小程序平台样式警告问题。
uni-file-picker：修复删除文件后返回信息不包含 file 对象的问题。
uni-icons：修复图标点击事件返回。
uni-nav-bar：修复微信小程序 fixed 布局下胶囊避让问题，优化标题居中。新增 showMenuButtonWidth 属性控制右侧是否避让胶囊，开启后会影响标题居中。
uni-tag：修复传入数字 0 不显示的问题。

版本 1.5.9（2025-07-18）

uni-popup：修复 nvue 下弹窗样式错乱，更新依赖 uni-transition 组件。示例取消 borderRadius 属性，内容圆角建议用户在插槽中自行实现。
uni-transition：修复 nvue 页面样式错误问题。

版本 1.5.8（2025-06-24）

uni-countdown：修复 filterShow 导致的运行报错。
uni-data-picker：修复 readonly 属性为 true 时选项匹配错误。
uni-data-select：修复清除按钮不展示问题，优化默认背景为白色以保持风格统一。
uni-datetime-picker：修复绑定字符串值时日历面板选中状态未重置，以及 iOS 微信小程序上日期范围格式 'YYYY-MM-DD' 不生效的问题。
uni-file-picker：修复支付宝小程序上传样式问题。
uni-list：修复可触发点击反馈的列表项无 hover 效果，及示例中过期图片地址。
uni-nav-bar：适配微信小程序固定导航栏时右侧插槽避让胶囊按钮。
uni-notice-bar：新增左侧自定义插槽，支持自定义文字或图标。
uni-popup：修复对话框 setVal 方法报错、数据双向绑定问题，以及示例中弹窗消失和过期图片地址。
uni-swipe-action：修复鸿蒙 next 浏览器无法滑动、App 端缺少选项时无法滑动、安卓运行报错且无法回弹，以及 WEB 平台控制台报错。优化兼容鸿蒙平台和更新示例。
uni-table：修复下拉筛选中 toISOString() 引发的时区问题。
uni-transition：修复第一次执行不显示动画、页面数据更新后动画复原，以及示例页面打开报错的问题。

平台兼容性

uni-ui 支持 uni-app 4.07 版本，兼容 Vue2 和 Vue3。在 Chrome、Safari、App-vue、App-nvue、Android、iOS、鸿蒙等平台均可使用。同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、快手小程序、京东小程序、QQ小程序、飞书小程序等主流小程序平台，以及鸿蒙元服务。对于快应用支持有限，具体细节请参考官方文档。

当前插件未包含内置示例页面。如需查看示例，请在 HBuilderX 中新建项目时选择 "hello uni-app > 扩展组件"，或访问在线演示和文档地址。

uni-ui 产品特点

高性能

uni-ui 采用 Vue 组件机制，底层自动差量更新数据，避免手动 setData 的性能瓶颈。针对交互密集型组件（如滑动操作），利用 CSS 动画及平台底层技术（如 wxs、bindingx）减少逻辑层与视图层通讯损耗。此外，组件在不可见时会自动停止背景操作，节省硬件资源。

全端兼容

组件设计为多端自适应，底层抹平各小程序平台的差异或 Bug。支持 nvue 原生渲染，并计划未来扩展至 PC 等大屏设备。

与 uni统计自动集成

使用 uni-ui 的内置组件（如导航栏、收藏按钮）可实现行为数据的自动打点，无需手动编码即可与 uni统计平台集成，方便分析页面标题和用户行为。

主题扩展

支持通过 uni.scss 进行样式定制，轻松切换应用主题风格。官方鼓励社区贡献更多主题以满足多样化需求。

快速开始

使用 HBuilderX 项目模板

在 HBuilderX 中新建 uni-app 项目时，选择 uni-ui 模板。创建后，得益于 easycom 技术，无需引用和注册即可直接使用组件。在代码编辑器中键入 "u" 可唤起组件列表快速插入。

通过 uni_modules 安装

可以从插件市场导入单个组件或整个 uni-ui 库。导入后组件自动可用，无需额外配置。

单独安装组件

访问插件市场，找到所需组件（如 uni-list、uni-badge）并导入。组件将存放在项目下的 uni_modules 目录中，直接使用即可。

导入全部组件

导入 uni-ui 主插件，即可一次性安装所有组件。如果未自动安装依赖，在 uni-ui 组件目录上右键选择“安装三方插件依赖”。

通过 npm 安装

适用于 Vue CLI 项目或 HBuilderX 中使用 npm 管理的项目。

准备 sass：安装 sass 和 sass-loader（注意版本兼容性，Node 版本小于16时建议使用，高于16时建议 v8.x）。
安装 uni-ui：运行 npm i @dcloudio/uni-ui 或 yarn add @dcloudio/uni-ui。

配置 easycom：在项目根目录的 pages.json 中添加以下规则：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  }
}

Vue CLI 项目额外配置：在根目录创建 vue.config.js 文件，确保 uni-ui 被正确编译：
```
module.exports = {
  transpileDependencies: ['@dcloudio/uni-ui']
}
```

配置完成后，即可在模板中直接使用组件，例如。

贡献代码

在使用过程中遇到问题，欢迎通过 GitHub 提交 Issues。如果有改进建议或新功能实现，也鼓励提交 Pull Requests 参与贡献。