移动Web UI组件库汇总

article/2025/10/10 11:46:21

1、 Ant Design Mobile

介绍:一个基于 Preact / React / React Native 的 UI 组件库

组件库地址:https://mobile.ant.design/index-cn

组件库来源:蚂蚁金服体验技术部

2、SUI Mobile

介绍:SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。

组件库地址:http://m.sui.taobao.org/

组件库来源:阿里巴巴共享业务事业部UED团队

3、FrozenUI

介绍:FrozenUI

是一套基于移动端的UI库。它非常轻量、精美,遵从手机QQ设计规范,提供了表单、对话框、列表等常用组件。此外,FrozenUI还提供文字截断、1px边框、rem、两端留白等常用场景的解决方案。CSS做得更模块化和颗粒化,使用sass编写CSS代码,你完全可以按照实际情况按需加载。

组件库地址:http://frozenui.github.io/

组件库来源:腾讯社交网络事业群

4、CUBE UI

介绍:cube-ui 是基于 Vue.js 实现的精致移动端组件库。由滴滴内部组件库精简提炼而来,经历了业务一年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障。

组件库地址:https://didi.github.io/cube-ui/#/zh-CN

组件库来源:滴滴

5、WeUI

介绍:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

组件库地址:https://weui.io/

组件库来源:微信

6、Vant

介绍:轻量、可靠的移动端 Vue 组件库,50+ 个经过有赞线上业务检验的组件,单元测试覆盖率超过 90%

组件库地址:https://youzan.github.io/vant/#/zh-CN/intro

组件库来源:有赞

7、VUX

https://vux.li/

mint UI
Vant 有赞开源ui库
https://youzan.github.io/vant/#/zh-CN/quickstart
vux
https://doc.vux.li/zh-CN/directives/v-transfer-dom.html
weui.js 弹窗、下拉菜单等
https://weui.io/weui.js/
mescroll上拉刷新,下拉加载框架
http://www.mescroll.com/index.html?v=0825
SUI Mobile和Light7
淘宝前端用,自带rem,两者其实是同一作者,后者支持jquery和zepto,前者只支持zepto
同时我们一边在移动端也会使用rem做为单位,推荐一个px转rem的插件lib-flexible,你可以像平时一样直接写px,插件或自动帮你转为rem




移动Web UI库列表

1、Framework7
Framework7 - is a free and open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS & Android native look and feel. It is also an indispensable prototyping apps tool to show working app prototype as soon as possible in case you need to.

2、SUI Mobile
MSUI 是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库,减少重复工作。
SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。

3、FrozenUI
Frozen UI是一个开源的简单易用,轻量快捷的移动端UI框架。基于手Q样式规范,选取最常用的组件,
做成手Q公用离线包减少请求,升级方式友好,文档完善,目前全面应用在腾讯手Q增值业务中。

4、Amaze UI
中国首个开源 HTML5 跨屏前端框架,相比国外框架,Amaze UI 关注中文排版,根据用户代理调整字体,实现更好的中文排版效果;兼顾国内主流浏览器及 App 内置浏览器兼容支持。
Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。

5、MUI
最接近原生APP体验的高性能前端框架。

6、WeUI
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

7、VUX
Vux(读音 [v’ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。
基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式。
vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码。

8、WEEX
Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,这样一来,你甚至可以使用其他框架驱动 Weex,打造三端一致的 native 应用。

9、Ant Design Mobile
antd-mobile 是 Ant Design 的移动规范的 React 实现,服务于蚂蚁及口碑无线业务。

10、vue-carbon
基于 vuejs 1.0 开发 material design 风格的移动端 WEB UI 库, 设计资源参考 CARBON FrameWork7。

11、uiKit
uiKit是一款轻量级、模块化的前端框架,可快速构建强大的web前端界面。

12、H-ui
H-ui是轻量级前端框架,简单免费,兼容性好,适用于中国网站。

13、layui
Layui 诞生于2016年金秋,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又不失丰盈的内在,说她是史上最轻量的结晶,似乎并不为过。一切都源自于她对原生态的执着,对前端社区的那些噪杂声音的过滤,以及她本身的精心雕琢。

14、YDUI Touch
YDUI Touch 专为移动端打造,在技术实现、交互设计上兼容主流移动设备,保证代码轻、性能高;使用 Flex 技术,灵活自如地对齐、收缩、扩展元素,轻松搞定移动页面布局;实现强大的屏幕适配布局,等比例适配所有屏幕。什么?用得不开心?轻松切换 px;自定义Javascript组件、Less文件、Less变量,定制一份属于自己的YDUI。

15、sheral
基于sandal(基础sass库)扩展的移动端UI库。具体设计思想可参看sheral——一个方便定制及扩展的UI组件库

16、vonic
一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用。

17、Mint UI
基于 Vue.js 的移动端组件库
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。
真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。
考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。
依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

18、Muse-UI
基于 Vue 2.0 和 Material Desigin 的 UI 组件库
1.组件丰富
Muse UI 基本实现了 Material Design 设计规范类的所有组件,另外还开发许多的功能性的组件
2.可定制
Muse UI 使用less文件,所有的颜色都有一个变量维护,通过编写 less 文件完成自定义主题,另外组件内部也提供一些修改效果的参数
3.基于 Vue 2.0
Muse UI 基于 Vue2.0 开发,Vue2.0是当下最快的前端框架之一,小巧,api友好,可用于开发的复杂单页应用。

19、jQuery WeUI
jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间。
jQuery WeUI 的最大特点是它只提供UI组件,并不会对项目所使用的框架和其他库有任何的限制,几乎可以在任何环境下使用。无论你的项目是基于jQuery,还是 React, Angular, Vue, 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目,也几乎可以做到拿来即用。
国外官网:http://jqweui.com/

20、QMUI Web
QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。
框架主要由一个强大的 Sass 方法合集与内置的工作流构成。通过 QMUI Web,开发者可以很轻松地提高 Web UI 开发的效率,同时保持了项目的高可维护性与稳健。

借鉴原文链接:https://blog.csdn.net/u013778905/article/details/78632650


http://chatgpt.dhexx.cn/article/b6MXoLUg.shtml

相关文章

移动web网页开发——动画

一、动画 1.1 动画 使用animation添加动画效果 思考:过渡可以实现什么效果? 答:实现2个状态间的变化过程 动画效果:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停&#xff09…

移动web学习总结

最近学习了些移动web开发的基础知识,稍微做下记录总结: Hello,移动web: https://www.imooc.com/learn/494 一、基础知识 1. 关于Pixel px : CSS px,逻辑像素,浏览器使用的抽象单位dp,pt: dev…

02-移动WEB

网站 favicon 图标 制作 favicon 图标 把图标切成 png 图片 把 png 图片转换为 ico 图标 , 借助第三方平台转换网站 如 https://www.bitbug.net/ favicon 图标放到网站根目录下 HTML 页面引入 favicon 图标 . <link rel"shortcut icon" href"/favicon.ic…

移动web(看这一篇就够了)

文章目录 移动web第一天&#x1f525;今日学习目标字体图标1、字体图标的使用2、购物车案例3、上传SVG矢量图 平面转换1、平面转换概念2、平面转换之位移3、平面转换之旋转4、平面转换之缩放 渐变 移动web第二天&#x1f525;今日学习目标2、透视效果3、空间转换之旋转4、立体呈…

移动web简介

什么是移动web 移动web就是在手机浏览器里面访问的web页面&#xff0c;除了一般的手机浏览器之外&#xff0c;好友一些程序内置的浏览器访问的页面也称之为移动web&#xff0c;例如微信公众号、小程序中的webview访问的页面等。 移动web与PCweb的区别 页面大小不一样。手机页…

什么是web移动端-移动端布局特点

文章目录 前言一、web移动端是什么&#xff1f;二、如何调试移动web网页1.真机调试&#xff1a;2.chrome浏览器调试&#xff1a;3.移动Web的发展历史 三.移动Web布局核心思想1.不允许网页出现横向滚动2.页面盛满屏幕&#xff0c;盒子宽度与屏幕一致 100%3.让盒子的内容宽高widt…

几种java结构图

集合类 IO流 线程池的加载 类与对象的关系 JVM springboot注解

java学习各种实用结构图

spring boot路线图 线程池 网络结构模型

Java基础知识结构图

目前还没有总结完&#xff0c;之后会慢慢进行补充&#xff01;

VGG16详细实现(笨办法)

一、 VGG16简介 VGG16网络是通过卷积和全连接的方式提取图片特征&#xff0c;进行识别一种网络结构。曾在某年取得分类第二&#xff0c;定位任务第一的佳绩。其结构包含&#xff1a; 13个卷积层 3个全连接层&#xff0c;所以被称为VGG16,如下图绿色的部分即是网络的结构组成&…

(Java实现)图片合成GIF动图(“复古”Swing界面)

1、项目简介 项目名称&#xff1a;pic2gif项目实现&#xff1a;将选定的几张图片(支持jpg&#xff0c;png&#xff0c;bmp&#xff0c;gif等) 合成为一张gif图关键字&#xff1a;图片处理&#xff0c;Java&#xff0c;Swing 2、项目结构 图片处理部分Swing界面部分 (u1s1, S…

图解 JVM 内存结构

文章目录 JVM 内存结构JVM包含哪几部分&#xff1f;在内存中 java 代码的执行的流程Java内存分布&#xff1a;各组件详细说明1. 程序计数器2. Java虚拟机栈3. 本地方法栈4. Java堆5. 方法区6. 运行时常量池7. 直接内存 总结问题那些区域会发生内存溢出&#xff1f;类存放在哪里…

JVM8基础结构图理解

目录 1 理解DOS里面的java命令 2 JVM内存 2.1 JVM主要组成部分 2.2 JVM内存(运行时数据区域) 2.2.1 虚拟机内存与本地内存区别 2.2.2 JVM内存(运行时数据区域)中的JVM内存 2.2.3 程序计数器(Program Counter Register) 2.2.4 虚拟机栈(JVM Stacks) 2.2.5 本地方法栈(N…

java绘制(可视化)树结构图

以JPanel组件为画板&#xff0c;继承JPanel类并重写paint(Graphics g)函数&#xff0c;在函数中使用画笔g绘制树结构图。 实例代码——3个java源文件&#xff1a;Main.java、DrawNode.java、DrawTree.java 1、Main.java package drawTree;public class Main {public static …

Java的理论知识以及结构图

Java基础 1、 简述Java的基本历史 java起源于SUN公司的一个GREEN的项目&#xff0c;其原先目的是&#xff1a;为家用消费电子产品发送一个信息的分布式代码系统&#xff0c;通过发送信息控制电视机、冰箱等 2、 简单写出Java特点&#xff0c;写出5个以上&#xff0c;越多越好…

Swagger使用教程及Swagger增强工具knife4j

标题 课外知识须知什么是swagger什么是RESTful 面向资源URI和URL区别&#xff1a; 博址推荐SpringBoot集成SwaggerSwagger常用注解Swagger增强工具knife4j 重点掌握&#xff1a;编写swagger的配置文件&#xff0c;理解每个配置的作用 课外知识须知 Swagger官网&#xff1a; …

JVM快速入门(类加载,对象创建,运行数据区,GC垃圾回收算法,jvm调优)

JVM快速入门 JVM定义&#xff1a;常见的几种jvmJDK&#xff0c;JRE&#xff0c;JVM区别 类加载过程类加载器作用加载器分类双亲委派机制好处 全盘委托机制 对象的创建流程类加载校验分配内存设置初值设置对象头对象头中的Mark Word 字段&#xff08;32位&#xff09;对象头中的…

一起学JVM(GC可视化工具Visual GC)

导读 众所周知&#xff0c;JVM&#xff08;java虚拟机&#xff09;运行着我们的java程序。java本身提供了自带工具VisualVM来帮助我们查看JVM的运行情况&#xff0c;下面主要介绍GC的可视化插件&#xff0d;Visual GC java版本 1.8.0_281 工具 VisualVM 的 Visual GC 插…

JVM G1详解

java程序性能 当我们调优java程序时&#xff0c;通常的目标有两个&#xff1a; 响应能力 或者 吞吐量 响应能力 响应能力指一个程序或者系统对请求的是否能够及时响应。 比如&#xff1a; 一个桌面UI能多快的响应一个事件&#xff1b; 一个网站能够多快返回一个页面请求&…

最简单的JVM内存结构图

目录 JVM内存结构图 方法区 堆 栈 程序计数器 本地方法栈 直接内存 内存分配性能优化-逃逸分析 总结 JVM内存结构图 大家好&#xff0c;好几天没有更新了&#xff0c;今天的内容有点多&#xff0c;我们详细介绍下JVM内部结构图&#xff0c;还是和之前一样&#xff0c;案…