uView UI 组件大全

uView UI 是一个基于 uni-app 的高质量 UI 组件库，提供丰富的跨平台组件（支持 H5、小程序、App 等）。以下是其核心组件的分类大全及功能说明，结合最新版本（1.2.10）整理：

---

📦 一、基础组件

1. 按钮 (Button)

   • 支持主题色、镂空、禁用等样式，可设置 openType（如微信小程序授权）和回调事件。

2. 图标 (Icon)

   • 内置多种图标，支持自定义颜色、大小、背景色和渐变色。

3. 布局 (Layout)

   • 提供栅格系统（Row/Col），支持响应式布局。

4. 标签 (Tag)

   • 可设置圆角、描边、禁用状态，支持前后插槽和渐变色背景。

---

📝 二、表单组件

1. 输入框 (Input)

   • 支持清除图标、格式校验，修复了内容错位问题。

2. 表单 (Form)

   • 集成校验规则，支持动态添加/删除表单项（需配合 data-cell 组件）。

3. 选择器 (Picker)

   • 时间、日期、地区等多维数据选择。

4. 验证码 (Sms-Code)

   • 短信验证码输入组件，支持倒计时和重发功能。

---

📊 三、数据展示

1. 数据块 (Data-Block)

   • 展示结构化数据，支持背景图、边框、悬停效果和最大宽度限制。

2. 列表 (List)

   • 瀑布流布局，支持分页加载（需搭配 Load-More 组件）。

3. 表格 (Table)

   • 多列数据展示，支持排序和筛选（如 ua-table）。

4. 标签页 (Tabs)

   • 可滑动切换的内容容器，兼容自定义导航栏。

---

🧭 四、导航与布局

1. 导航栏 (Navbar)

   • 自定义导航栏，需配合状态栏高度计算（statusBarHeight + navbarHeight）。

2. Dock 菜单 (ua-Dock)

   • 毛玻璃底部导航栏，支持图标、徽章和滚动。

3. 状态栏 (Status-Bar)

   • 动态适配不同设备状态栏高度。

---

💬 五、反馈与交互

1. 顶部提示 (TopTips)

   • 页面顶部滑出提示，支持成功/警告等主题，需在 onReady 生命周期调用。

2. 弹窗 (Popup)

   • 从屏幕边缘弹出内容，支持自定义位置和动画（1.2.9 版本优化）。

3. 操作菜单 (Action-Sheet)

   • 底部弹出选择菜单，支持图标和颜色定制。

4. 加载提示 (Load-More)

   • 分页加载状态提示（如“加载中”“无更多数据”）。

---

🎨 六、其他特色组件

1. 图表 (Charts)

   • 集成 u-charts 库，支持折线图、饼图等。

2. 时间轴 (Timeline)

   • 展示步骤或历史记录。

3. 富文本编辑器 (Rich-Text)

   • 内置编辑器，支持图文混排。

4. 遮罩层 (Overlay)

   • 半透明遮罩，用于弹窗背景（1.2.9 新增）。

---

⚙️ 安装与配置建议

1. 依赖安装

   npm install uview-ui
   # 必须安装 SCSS 插件（HBuilderX 中搜索 "scss/sass 编译"）。

2. 全局配置

   • main.js 引入：import uView from "uview-ui"; Vue.use(uView);

   • uni.scss 添加：@import 'uview-ui/theme.scss';

   • App.vue 首行引入：@import "uview-ui/index.scss";（需 lang="scss"）。

3. 按需使用

   • 配置 pages.json 的 easycom 规则，无需手动导入组件4：

     json

     "easycom": {"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
     }

---

💎 注意事项

• 自定义导航栏问题：使用 TopTips 时需传入 navbar-height（状态栏高度 + 导航栏高度）。

• 样式覆盖：修改组件样式需用 ::v-deep 并指定父类（兼容小程序）。

• 包体积优化：发行时自动剔除未使用组件，开发模式体积较大属正常现象。

以上组件均支持 H5、小程序、App 等平台，最新版本详见 uView 更新日志。完整文档可访问 uView 官网