uni-app中uni-ui组件库的使用

介绍

uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。

uni-ui不包括基础组件，它是基础组件的补充

特点

1. 高性能（自动差量更新数据，优化逻辑层和视图层通讯折损，背景停止）

2. 全端

3. 风格扩展

4. 与uniCloud协作

5. 与uni统计自动集成实现免打点

6. uni-ui符合全套DCloud组件规范

使用

在HBuilderX 新建uni-app项目的模板中，选择uni-ui模板

通过 uni_modules 单独安装组件

如果你没有创建uni-ui项目模板，也可以在你的工程里，通过 uni_modules 单独安装需要的某个组件。下表为uni-ui的扩展组件清单，点击每个组件在详情页面可以导入组件到项目下，导入后直接使用即可，无需import和注册

组件名	组件说明
uni-badge	数字角标
uni-calendar	日历
uni-card	卡片
uni-collapse	折叠面板
uni-combox	组合框
uni-countdown	倒计时
uni-data-checkbox	数据选择器
uni-data-picker	数据驱动的picker选择器
uni-dateformat	日期格式化
uni-datetime-picker	日期选择器
uni-drawer	抽屉
uni-easyinput	增强输入框
uni-fab	悬浮按钮
uni-fav	收藏按钮
uni-file-picker	文件选择上传
uni-forms	表单
uni-goods-nav	商品导航
uni-grid	宫格
uni-group	分组
uni-icons	图标
uni-indexed-list	索引列表
uni-link	超链接
uni-list	列表
uni-load-more	加载更多
uni-nav-bar	自定义导航栏
uni-notice-bar	通告栏
uni-number-box	数字输入框
uni-pagination	分页器
uni-popup	弹出层
uni-rate	评分
uni-row	布局-行
uni-search-bar	搜索栏
uni-segmented-control	分段器
uni-steps	步骤条
uni-swipe-action	滑动操作
uni-swiper-dot	轮播图指示点
uni-table	表格
uni-tag	标签
uni-title	章节标题
uni-transition	过渡动画

注意：下载最新的组件目前仅支持 uni_modules ,非 uni_modules 版本最高支持到组件的1.2.10版本

通过 uni_modules 导入全部组件

如果想一次把所有uni-ui组件导入到项目中，只需要导入一个 uni-ui 组件即可 点击去导入。

如果没有自动导入其他组件，可以在 uni-ui 组件目录上右键选择 安装三方插件依赖 即可。

以上是常用使用uni-ui的三种方式