UniApp扩展组件uni-ui介绍

uni-ui扩展组件是需要自己导入的，可以整包导入，也可以按需导入，扩展组件是内置组件的补充，让UniApp的组件更丰富，下面来具体介绍下：

1、uni-badge 数字角标

数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景。

演示如下：

2、uni-breadcrumb 面包屑

显示当前页面的路径，快速返回之前的任意页面。

演示如下：

3、uni-calendar 日历

日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等。

演示如下：

4、uni-card 卡片

卡片组件通用来显示完整独立的一段信息，同时让用户理解他的作用。例如一篇文章的预览图、作者信息、时间等，卡片通常是更复杂和更详细信息的入口点。

演示如下：

 5、uni-collapse 折叠面板

折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。

演示如下：

6、uni-combox 组合框

组合框组件，一般用于可以选择也可以输入的表单项。

演示如下：

7、uni-countdown 倒计时

倒计时组件。

演示如下：

8、uni-data-checkbox 数据选择器

本组件是基于uni-app基础组件checkbox的封装。本组件要解决问题包括：

数据绑定型组件：给本组件绑定一个data，会自动渲染一组候选内容。再以往，开发者需要编写不少代码实现类似功能
自动的表单校验：组件绑定了data，且符合uni-forms组件的表单校验规范，搭配使用会自动实现表单校验
本组件合并了单选多选
本组件有若干风格选择，如普通的单选多选框、并列button风格、tag风格。开发者可以快速选择需要的风格。但作为一个封装组件，样式代码虽然不用自己写了，却会牺牲一定的样式自定义性

在uniCloud开发中，DB Schema中配置了enum枚举等类型后，在web控制台的自动生成表单功能中，会自动生成uni-data-checkbox组件并绑定好data

演示如下：

9、uni-data-picker 级联选择器

<uni-data-picker> 是一个选择类datacom组件。

支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。

候选数据支持一次性加载完毕，也支持懒加载，比如示例图中，选择了“北京”后，动态加载北京的区县数据。

<uni-data-picker> 组件尤其适用于地址选择、分类选择等选择类。

<uni-data-picker> 支持本地数据、云端静态数据(json)，uniCloud云数据库数据。

<uni-data-picker> 可以通过JQL直连uniCloud云数据库，配套DB Schema，可在schema2code中自动生成前端页面，还支持服务器端校验。

在uniCloud数据表中新建表“uni-id-address”和“opendb-city-china”，这2个表的schema自带foreignKey关联。在“uni-id-address”表的表结构页面使用schema2code生成前端页面，会自动生成地址管理的维护页面，自动从“opendb-city-china”表包含的中国所有省市区信息里选择地址。

演示如下：

 10、uni-data-select 下拉框

当选项过多时，使用下拉菜单展示并选择内容

演示如下：

11、 uni-dateformat 日期格式化

日期格式化组件。

演示如下：

12、uni-datetime-picker 日期选择器

该组件的优势是，支持时间戳输入和输出（起始时间、终止时间也支持时间戳），可同时选择日期和时间。

若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 picker 组件。

演示如下：

13、uni-drawer 抽屉

抽屉侧滑菜单。

演示如下：

 14、uni-easyinput 增强输入框

easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件uni-forms而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能

演示如下：

 15、uni-fab 悬浮按钮

点击可展开一个图形按钮菜单

演示如下：

16、uni-fav 收藏按钮

 用于收藏功能，可点击切换选中、不选中的状态。

演示如下：

17、uni-file-picker 文件选择上传

文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间

18、uni-forms 表单

uni-app的内置组件已经有了 <form>组件，用于提交表单内容。

然而几乎每个表单都需要做表单验证，为了方便做表单验证，减少重复开发，uni-ui 又基于 <form>组件封装了 <uni-forms>组件，内置了表单验证功能。

<uni-forms> 提供了 rules属性来描述校验规则、<uni-forms-item>子组件来包裹具体的表单项，以及给原生或三方组件提供了 onFieldChange() 来校验表单值。

每个要校验的表单项，不管input还是checkbox，都必须放在<uni-forms-item>组件中，且一个<uni-forms-item>组件只能放置一个表单项。

<uni-forms-item>组件内部预留了显示error message的区域，默认是在表单项的底部。

另外，<uni-forms>组件下面的各个表单项，可以通过<uni-group>包裹为不同的分组。同一<uni-group>下的不同表单项目将聚拢在一起，同其他group保持垂直间距。<uni-group>仅影响视觉效果。

 演示如下：

 

19、uni-goods-nav 商品导航

商品加入购物车，立即购买

演示如下：

20、uni-grid 宫格

宫格组件。

演示如下：

21、uni-group 分组

分组组件可用于将组件分组，添加间隔，以产生明显的区块。

演示如下：

 

22、 uni-icons 图标

用于展示 icon 图标 。

演示如下：

具体看官方的文档

23、uni-indexed-list 索引列表

用于展示索引列表。

演示如下：

24、uni-link 超链接

uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页。

演示如下：

25、 uni-list 列表

List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。

在vue页面里，它默认使用页面级滚动。在app-nvue页面里，它默认使用原生list组件滚动。这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。

uni-list组件是父容器，里面的核心是uni-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。

uni-list-item有很多风格，uni-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容。

内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。

涉及很多大图或丰富内容的列表，比如类今日头条的新闻列表、类淘宝的电商列表，需要通过扩展插槽实现。

下文均有样例给出。

uni-list不包含下拉刷新和上拉翻页。

演示如下：

26、uni-load-more 加载更多

用于列表中，做滚动加载使用，展示 loading 的各种状态。

效果图如下：

27、uni-nav-bar 自定义导航栏

导航栏组件，主要用于头部导航。

演示效果图如下：

28、 uni-notice-bar 通告栏

通告栏组件 。

演示效果图如下：

29、uni-number-box 数字输入框

带加减按钮的数字输入框。

演示效果图如下：

30、uni-pagination 分页器

分页器组件，用于展示页码、请求数据等。

演示效果图如下：

31、 uni-popup 弹出层

弹出层组件，在应用中弹出一个消息提示窗口、提示框等

演示效果图如下：

32、uni-rate 评分

评分组件，多用于购买商品后，对商品进行评价等场景

演示效果图如下：

33、uni-row/uni-col 布局行/列

流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。

演示效果图如下：

34、 uni-search-bar 搜索栏

搜索栏组件

演示效果图如下：

35、uni-section 标题栏

标题栏组件，主要用于文章、列表详情等标题展示。

演示效果图如下：

36、 uni-segmented-control 分段器

用作不同视图的显示

演示效果图如下：

37、uni-steps 步骤条

步骤条，常用于显示进度

演示效果图如下：

38、 uni-swipe-action 滑动操作

通过滑动触发选项的容器

演示效果图如下：

39、uni-swiper-dot 轮播图指示点

自定义轮播图指示点

演示效果图如下：

40、uni-table 表格

用于展示多条结构类似的数据

演示效果图如下：

41、uni-tag 标签

用于展示1个或多个文字标签，可点击切换选中、不选中的状态 。

演示效果图如下：

42、uni-title 章节标题

章节标题，通常用于记录页面标题，使用当前组件，uni-app 如果开启统计，将会自动统计页面标题 。

演示效果图如下：

43、uni-tooltip 文字提示

常用于展示鼠标 hover 时的提示信息。

演示效果图如下：

44、uni-transition 过渡动画

元素过渡动画

演示效果图如下：

注：这只是一个UniApp的扩展组件uni-ui的一个学习导航，具体的用法请看官方文档