uni-app中uni-ui组件库的使用
uni-app中uni-ui组件库的使用
介绍
uni-ui是DCloud提供的一个跨端ui库,它是基于vue组件的、flex布局的、无dom的跨全端ui框架。
uni-ui不包括基础组件,它是基础组件的补充
特点
高性能(自动差量更新数据,优化逻辑层和视图层通讯折损,背景停止)
全端
风格扩展
与uniCloud协作
与uni统计自动集成实现免打点
uni-ui符合全套DCloud组件规范
使用
在HBuilderX 新建uni-app项目的模板中,选择uni-ui模板
![](https://i-blog.csdnimg.cn/blog_migrate/a5d1a33efd1ff29f76222279809af084.jpeg)
通过 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 | |
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 组件目录上右键选择 安装三方插件依赖 即可。
![](https://i-blog.csdnimg.cn/blog_migrate/8462eb2d7de7f8d810c799e16b2d7a1a.png)
以上是常用使用uni-ui的三种方式
更多推荐
所有评论(0)