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

news2025/1/11 17:02:08

介绍

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

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

特点

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

  1. 全端

  1. 风格扩展

  1. 与uniCloud协作

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

  1. 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的三种方式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/193919.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Leetcode力扣秋招刷题路-0337

从0开始的秋招刷题路,记录下所刷每道题的题解,帮助自己回顾总结 337. 打家劫舍 III(Mid) 小偷又发现了一个新的可行窃的地区。这个地区只有一个入口,我们称之为 root 。 除了 root 之外,每栋房子有且只有一…

ESP32+Arduino+OLED+u8g2播放视频

1、思路分析 ESP32采用Arduino开发,结合u8g2模块可以很方便地实现在oled上显示图片。因此,只需要将一个视频拆开成一帧帧,然后循环显示即可。 然而,有几个问题: 视频太大,esp32的flash无法存下怎么办&…

DynaSLAM-8 DynaSLAM中双目运行流程(Ⅱ):初始化SLAM系统部分System.cc

目录 1.回忆 2.System::System 1.回忆 上篇博客中我们讲述了DynaSLAM中初始化Mask R-CNN网络部分的代码。 这篇博客我们讲述初始化DynaSLAM除Mask R-CNN网络部分以外的代码。 2.System::System 初始化Mask R-CNN网络后,程序执行: // Create SLAM syst…

MongoDB 4.0支持事务了,还有多少人想用MySQL呢?

目录一、MongoDB 不支持事务?二、什么是事务?三、ACID的定义四、如何使用事务五、重要参数简介1、时间限制2、oplog大小限制六、连接池 数据库连接的缓存1、MongoDB查询数据五步走2、MongoDB连接池的参数配置七、聚合框架八、MongoDB文档格式设计1、限制…

【八大数据排序法】插入排序法的图形理解和案例实现 | C++

第十六章 插入排序法 目录 第十六章 插入排序法 ●前言 ●认识算法 ●一、插入排序法是什么? 1.简要介绍 2.图形理解 3.算法分析 ●二、案例实现 1.案例一 ●总结 前言 排序算法是我们在程序设计中经常见到和使用的一种算法,它主要是将…

MySQL【left join、right join、inner join】详细用法

参考链接:mysql的left join和inner join的详细用法https://blog.csdn.net/weixin_45906830/article/details/111133181 1. inner join:内连接:显示两个表中有联系的所有数据。 通俗讲:inner join 查找的数据是左右两张表共有的。 …

【C语言练习】字符串旋转你会嘛?

目录🍬题目描述:🍭思路一:🍡代码优化:🍭思路二:🍬题目描述:🍭思路一:🍭思路二:🍬题目描述&#xf…

车辆控制器的 Fail Safe功能介绍

Fail Safe概要 在漆黑的夜路上,一辆开着头灯的汽车经过。 如果控制前照灯的控制器在这种情况下发生故障怎么办? 大灯会熄灭,造成危险吗? 不。 在这种情况下,控制器的“Fail Safe”被激活,前照灯保持其先前的…

企业需要一个数字体验平台(DXP)吗?

数字体验平台是一个软件框架,通过与不同的业务系统喝解决方案集成,帮助企业和机构建立、管理和优化跨渠道的数字体验。帮助企业实现跨网站、电子邮件、移动应用、社交平台、电子商务站点、物联网设备、数字标牌、POS系统等传播内容,除了为其中…

termux入门安装

下载安装 请使用F-Droid 的Termux,GooglePlay的 Termux 可能存在一些问题。 下载地址:https://f-droid.org/en/packages/com.termux/ 下载完成在安卓手机上直接安装Termux的apk文件就可以了。 termux换源 新版本的termux换源一条命令就可以超简单&…

【C++之类和对象】初识类和对象

目录前言一、面向对象VS面向过程二、类三、类的定义四、类的访问限定符五、封装六、C中的用struct和用class定义的类有何不同?七、类的作用域八、类的实例化九、计算类对象的大小十、this指针前言 C是一门面向对象的语言,之前学习的C语言是一种面向过程的…

对epoll的重新学习【附源码】

目录 一、概述 二、使用 三、API 3.1 epoll_create(int size) 3.2 epoll_ctl(int epfd,int op, int fd. struct epoll_event *event) 3.3 epoll_wait(int epfd, struct peoll_event *events, int maxevents, int timeout) 3.4 *ssize_t read(int fd, void buf, size_t c…

python模块之codecs

python 模块codecs python对多国语言的处理是支持的很好的,它可以处理现在任意编码的字符,这里深入的研究一下python对多种不同语言的处理。 有一点需要清楚的是,当python要做编码转换的时候,会借助于内部的编码,转换…

Spark读取Hive数据的两种方式与保存数据到HDFS

Spark读取Hive数据的两种方式与保存数据到HDFS Spark读取Hive数据的方式主要有两种 1、 通过访问hive metastore的方式,这种方式通过访问hive的metastore元数据的方式获取表结构信息和该表数据所存放的HDFS路径,这种方式的特点是效率高、数据吞吐量大、…

规则引擎-drools-4-动态生成drl文档

文章目录drools 引擎工作原理动态生成drl文件示例步骤模板文件 decision_rule_template.drt生成规则文件serviceDecisionNodeFact实体对象生成的drl字符串如下KieHealper 执行动态生成drl文件的原理实际应用过程中,很多时候,规则不是一成不变的&#xff…

54.Isaac教程--RealSense相机

RealSense相机 ISAAC教程合集地址: https://blog.csdn.net/kunhe0512/category_12163211.html 文章目录RealSense相机RealsenseCamera Codelet示例应用程序故障排除固件注意事项通过 USB 3.0 电缆使用 USB 3.0 端口x86_64 Linux 主机设置设置电源模型英特尔RealSense 435 摄像头…

分享159个ASP源码,总有一款适合您

ASP源码 分享159个ASP源码,总有一款适合您 下面是文件的名字,我放了一些图片,文章里不是所有的图主要是放不下..., 159个ASP源码下载链接:https://pan.baidu.com/s/1EaQuRA6mxyylrNWLq8iKVA?pwdaljz 提取码&#x…

springmvc知识巩固

文章目录回顾spring知识前言什么是SpringMVCSpringMVC的优点SpringMVC的常用注解Controller注解的作用ResponseBody注解的作用SpringMVC重定向和转发SpringMVC主要组件SpringMVC的执行流程回顾spring知识 上篇整理了“spring知识巩固”常见面试题,有需要的伙伴请点…

Java基础:源码讲解Collection及相关实现List、Set、Queue

1 缘起 说到Java第一问,很多人的第一反应是三大特性,那么接下来,可能就是集合了。 Collection是Java必知必会,即使没有系统学习,在实际的开发过程中,Collection也是应用最广泛的。 当然,一般的…

ESP-IDF:归并排序测试

ESP-IDF:归并排序测试 /归并排序测试/ void printarry18 (int arr[],int length) { for(int i0;i<length;i) { cout<<arr[i]<<" "; } cout<<endl; } void merge(int arr[],int start, int end, int mid,int * temp) { int length 0;//记录te…