图集1/15
正文 192636字数 355阅读
快速上手获取 WeUI
WeUI 是一套与微信原生 UI 一致的 UI 库，核心文件是 weui.css，只需要获取到该文件，然后在页面中引入，即可使用 WeUI 的组件。有以下几种获取方式：
微信官方、BootCDN 和 cdnjs 为 WeUI 提供了 CDN 链接，推荐使用，链接如下：
微信官方 //res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css
微信官方 //res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css
BootCDN //cdn.bootcss.com/weui/0.4.3/style/weui.css
cdnjs //cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.css
- 1
- 2
- 3
- 4
其中，1.0.0是目前 WeUI 最新的版本号，代码命名有较大的改变，因此保留0.4.2的CDN。
以上链接，均支持 http 和 https 协议，均包含未压缩版 weui.css 和压缩版 weui.min.css 。
使用
通过以上方式获取到 WeUI 后，在页面中引入后即可使用。以 WeUI 的按钮为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用 -->
<a href="javascript:;" class="weui-btn weui-btn_primary">绿色按钮</a>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
更多的上手示例，请参考 更多的上手示例，请参考 weui.io/
组件列表
ActionSheet
ActionSheet用于显示包含一系列可交互的动作集合，包括说明、跳转等。由底部弹出，一般用于响应用户对页面的点击。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div id="actionSheet_wrap">
<div class="weui-mask_transparent actionsheet__mask" id="mask"></div>
<div class="weui-actionsheet" id="weui-actionsheet">
<div class="weui-actionsheet__menu">
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
</div>
<div class="weui-actionsheet__action">
<div class="weui-actionsheet__cell" id="actionsheet_cancel">取消</div>
</div>
</div>
<div class="weui-skin_android" id="weui-android-actionsheet" style="/*display: none*/">
<div class="weui-mask"></div>
<div class="weui-actionsheet">
<div class="weui-actionsheet__menu">
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
</div>
</div>
</div>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Article
文字视图显示大段文字，这些文字通常是页面上的主体内容。Article支持分段、多层标题、引用、内嵌图片、有/无序列表等富文本样式，并可响应用户的选择操作。
在微信客户端webview中使用Article，必须保证文字有足够的可读性和可辨识性、使用规范字体、保证足够的段间距、段首无缩进。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<article class="weui-article">
<h1>大标题</h1>
<section>
<h2 class="title">章标题</h2>
<section>
<h3>1.1 节标题</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<p>
<img src="./images/pic_article.png" alt="">
<img src="./images/pic_article.png" alt="">
</p>
</section>
<section>
<h3>1.2 节标题</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</section>
</article>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Badge
badge，徽章
带文字的badge
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<span class="weui-badge">New</span>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
小红点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<span class="weui-badge weui-badge_dot"></span>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
更多用法请看： 更多用法请看： weui.io/#badge
Button
按钮可以使用a或者button标签。wap上要触发按钮的active态，必须触发ontouchstart事件，可以在body上加上ontouchstart=""全局触发。
按钮常见的操作场景：确定、取消、警示，分别对应class：weui-btn_primary、weui-btn_default、weui-btn_warn，每种场景都有自己的置灰态weui-btn_disabled，除此外还有一种镂空按钮weui-btn_plain-xxx，客户端webview里的按钮尺寸有两类，默认宽度100%，小型按钮宽度自适应，两边边框与文本间距0.75em：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作 Normal</a>
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">页面主操作 Disabled</a>
<a href="javascript:;" class="weui-btn weui-btn_default">页面次要操作 Normal</a>
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">页面次要操作 Disabled</a>
<a href="javascript:;" class="weui-btn weui-btn_warn">警告类操作 Normal</a>
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告类操作 Disabled</a>
<div class="button-sp-area">
<a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_plain-default weui-btn_plain-disabled">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_plain-primary weui-btn_plain-disabled">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">按钮</a>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Cell
Cell，列表视图，用于将信息以列表的结构显示在页面上，是wap上最常用的内容结构。Cell由多个section组成，每个section包括section headerweui-cells__title以及cellsweui-cells。
cell由thumbnailweui-cell__hd、bodyweui-cell__bd、accessoryweui-cell__ft三部分组成，其中weui-cell__bd采用自适应布局.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-cells__title">带说明的列表项</div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<p>标题文字</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</div>
</div>
<div class="weui-cells__title">带图标、说明的列表项</div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__hd"><img src="..." alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>标题文字</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><img src="..." alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>标题文字</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</div>
</div>
<div class="weui-cells__title">带跳转的列表项</div>
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
</div>
</a>
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
</div>
</a>
</div>
<div class="weui-cells__title">带说明、跳转的列表项</div>
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</a>
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</a>
</div>
<div class="weui-cells__title">带图标、说明、跳转的列表项</div>
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd"><img src="..." alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</a>
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd"><img src="..." alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</a>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Dialog
Dialog，也叫 “modal”，表现为带遮罩的弹框。可以分为 Alert 和 Confirm 两种。
Alert
alert，警告弹框，功能类似于浏览器自带的 alert 弹框，用于提醒、警告用户简单扼要的信息，只有一个“确认”按钮，点击“确认”按钮后关闭弹框。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div style="/*display: none;*/">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
<div class="weui-dialog__bd">弹窗内容，告知当前页面信息等</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
</div>
</div>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
预览效果如下：
Confirm
Confirm，确认弹框，功能类似于浏览器自带的 confirm 和 prompt 的集合，可以用于让用户确认/取消确认，也可以让用户填写表单。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div id="dialog1" style="/*display: none;*/">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
<div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
</div>
</div>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
预览效果如下：
Flex
Flex用于快速进行Flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-flex">
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
</div>
<div class="weui-flex">
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
</div>
<div class="weui-flex">
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
</div>
<div class="weui-flex">
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Footer
Footer用于实现页脚，Copyright
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-footer">
<p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
</div>
<div class="weui-footer">
<p class="weui-footer__links">
<a href="javascript:void(0);" class="weui-footer__link">底部链接</a>
</p>
<p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
</div>
<div class="weui-footer">
<p class="weui-footer__links">
<a href="javascript:void(0);" class="weui-footer__link">底部链接</a>
<a href="javascript:void(0);" class="weui-footer__link">底部链接</a>
</p>
<p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
</div>
<div class="weui-footer weui-footer_fixed-bottom">
<p class="weui-footer__links">
<a href="javascript:home();" class="weui-footer__link">WeUI首页</a>
</p>
<p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Gallery
Gallery用于实现上传图片的展示或幻灯片播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-gallery" style="display: block">
<span class="weui-gallery__img" style="background-image: url(https://out.img.pan.iswtf.com/Fibe53f9OFxxW-b8o-XHJyZe1lkW);"></span>
<div class="weui-gallery__opr">
<a href="javascript:" class="weui-gallery__del">
<i class="weui-icon-delete weui-icon_gallery-delete"></i>
</a>
</div>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Grid
grid 九宫格，功能类似于微信钱包界面中的九宫格，用于展示有多个相同级别的入口。包含功能的图标和简洁的文字描述。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-grids">
<a href="javascript:;" class="weui-grid">
<div class="weui-grid__icon">
<img src="https://weui.io/images/icon_tabbar.png" alt="">
</div>
<p class="weui-grid__label">
Button
</p>
</a>
<a href="javascript:;" class="weui-grid">
<div class="weui-grid__icon">
<img src="https://weui.io/images/icon_tabbar.png" alt="">
</div>
<p class="weui-grid__label">
Cell
</p>
</a>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Loadmore
Loadmore用于实现加载更多的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-loadmore">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加载</span>
</div>
<div class="weui-loadmore weui-loadmore_line">
<span class="weui-loadmore__tips">暂无数据</span>
</div>
<div class="weui-loadmore weui-loadmore_line weui-loadmore_dot">
<span class="weui-loadmore__tips"></span>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Input
Input，用于表单，可以分成“输入型”和“选择型”两种。输入型包括单行文本（文本、数值、电话、密码等）、多行文本；选择型包括下拉选择、单选、多选、开关、日期时间等。在 WeUI 中，表单通常与 Cell 组件配合使用。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-cells__title">单选列表项</div>
<div class="weui-cells weui-cells_radio">
<label class="weui-cell weui-check__label" for="x11">
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
<input type="radio" class="weui-check" name="radio1" id="x11">
<span class="weui-icon-checked"></span>
</div>
</label>
<label class="weui-cell weui-check__label" for="x12">
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
<input type="radio" name="radio1" class="weui-check" id="x12" checked="checked">
<span class="weui-icon-checked"></span>
</div>
</label>
<a href="javascript:void(0);" class="weui-cell weui-cell_link">
<div class="weui-cell__bd">添加更多</div>
</a>
</div>
<div class="weui-cells__title">复选列表项</div>
<div class="weui-cells weui-cells_checkbox">
<label class="weui-cell weui-check__label" for="s11">
<div class="weui-cell__hd">
<input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked">
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>standard is dealt for u.</p>
</div>
</label>
<label class="weui-cell weui-check__label" for="s12">
<div class="weui-cell__hd">
<input type="checkbox" name="checkbox1" class="weui-check" id="s12">
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>standard is dealicient for u.</p>
</div>
</label>
<a href="javascript:void(0);" class="weui-cell weui-cell_link">
<div class="weui-cell__bd">添加更多</div>
</a>
</div>
<div class="weui-cells__title">表单</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">qq</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入qq号"/>
</div>
</div>
<div class="weui-cell weui-cell_vcode">
<div class="weui-cell__hd">
<label class="weui-label">手机号</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input" type="tel" placeholder="请输入手机号">
</div>
<div class="weui-cell__ft">
<a href="javascript:;" class="weui-vcode-btn">获取验证码</a>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label for="" class="weui-label">日期</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="date" value=""/>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label for="" class="weui-label">时间</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="datetime-local" value="" placeholder=""/>
</div>
</div>
<div class="weui-cell weui-cell_vcode">
<div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="number" placeholder="请输入验证码"/>
</div>
<div class="weui-cell__ft">
<img class="weui-vcode-img" src="./images/vcode.jpg" />
</div>
</div>
</div>
<div class="weui-cells__tips">底部说明文字底部说明文字</div>
<div class="weui-cells__title">表单报错</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_warn">
<div class="weui-cell__hd"><label for="" class="weui-label">卡号</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="number" pattern="[0-9]*" value="weui input error" placeholder="请输入卡号"/>
</div>
<div class="weui-cell__ft">
<i class="weui-icon-warn"></i>
</div>
</div>
</div>
<div class="weui-cells__title">开关</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_switch">
<div class="weui-cell__bd">标题文字</div>
<div class="weui-cell__ft">
<input class="weui-switch" type="checkbox"/>
</div>
</div>
</div>
<div class="weui-cells__title">文本框</div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<input class="weui-input" type="text" placeholder="请输入文本"/>
</div>
</div>
</div>
<div class="weui-cells__title">文本域</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
<div class="weui-textarea-counter"><span>0</span>/200</div>
</div>
</div>
</div>
<div class="weui-cells__title">选择</div>
<div class="weui-cells">
<div class="weui-cell weui-cell_select weui-cell_select-before">
<div class="weui-cell__hd">
<select class="weui-select" name="select2">
<option value="1">+86</option>
<option value="2">+80</option>
<option value="3">+84</option>
<option value="4">+87</option>
</select>
</div>
<div class="weui-cell__bd">
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码"/>
</div>
</div>
</div>
<div class="weui-cells__title">选择</div>
<div class="weui-cells">
<div class="weui-cell weui-cell_select">
<div class="weui-cell__bd">
<select class="weui-select" name="select1">
<option selected="" value="1">微信号</option>
<option value="2">QQ号</option>
<option value="3">Email</option>
</select>
</div>
</div>
<div class="weui-cell weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd">
<label for="" class="weui-label">国家/地区</label>
</div>
<div class="weui-cell__bd">
<select class="weui-select" name="select2">
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">英国</option>
</select>
</div>
</div>
</div>
<label for="weuiAgree" class="weui-agree">
<input id="weuiAgree" type="checkbox" class="weui-agree__checkbox">
<span class="weui-agree__text">
阅读并同意<a href="javascript:void(0);">《相关条款》</a>
</span>
</label>
<div class="weui-btn-area">
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Msg Page
结果页通常来说可以认为进行一系列操作步骤后，作为流程结束的总结性页面。结果页的作用主要是告知用户操作处理结果以及必要的相关细节（可用于确认之前的操作是否有误）等信息；若该流程用于开启或关闭某些重要功能，可在结果页增加与该功能相关的描述性内容；除此之外，结果页也可以承载一些附加价值操作，例如提供抽奖、关注公众号等功能入口。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-msg">
<div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
<div class="weui-msg__text-area">
<h2 class="weui-msg__title">操作成功</h2>
<p class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<a href="javascript:void(0);">文字链接</a></p>
</div>
<div class="weui-msg__opr-area">
<p class="weui-btn-area">
<a href="javascript:history.back();" class="weui-btn weui-btn_primary">推荐操作</a>
<a href="javascript:history.back();" class="weui-btn weui-btn_default">辅助操作</a>
</p>
</div>
<div class="weui-msg__extra-area">
<div class="weui-footer">
<p class="weui-footer__links">
<a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a>
</p>
<p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
</div>
</div>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Navbar
Navbar，顶部 tab，当需要在页面顶部展示 tab 导航时使用，用法与 Tabbar 类似。
.weui-navbar 通常作为 .weui-tab 子元素、.weui-tab__panel 的兄弟元素一起使用。结构为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-tab">
<div class="weui-navbar">
<div class="weui-navbar__item weui-bar__item_on">
选项一
</div>
<div class="weui-navbar__item">
选项二
</div>
<div class="weui-navbar__item">
选项三
</div>
</div>
<div class="weui-tab__panel">
<div>Page 1</div>
<div style="display:none">Page 2</div>
<div style="display:none">Page 3</div>
</div>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
.weui-tab 作为外层容器，高度撑满它的父容器的高度，.weui-tab__panel 作为 tab 的主体内容，占据除了 .weui-navbar 以外的全部父容器的高度，.weui-navbar 则为底部的导航栏。而 .weui-navbar__item 为 .weui-navbar 的子元素，表示一个导航区，建议不超过 5 个。
另外，需要给当前激活的 .weui-navbar__item 元素添加 .weui-bar__item_on 类，来标示当前高亮的条目。
Panel
Panelweui-panel由head（可选）、body、foot（可选）三部分组成，主要承载了图文组合列表weui-media-box_appmsg、文字组合列表weui-media-box_text以及小图文组合列表weui-media-box_small-appmsg。
body部分根据不同业务可自定义不同的内容。foot部分默认支持“查看更多”的样式，需要在weui-panel扩展一个weui-panel_access的类。
图文组合列表：包括封面图、标题与描述，封面图居左，与文字垂直居中对齐，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-panel weui-panel_access">
<div class="weui-panel__hd">图文组合列表</div>
<div class="weui-panel__bd">
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">标题一</h4>
<p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">标题二</h4>
<p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
</div>
</a>
</div>
<div class="weui-panel__ft">
<a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
<div class="weui-cell__bd">查看更多</div>
<span class="weui-cell__ft"></span>
</a>
</div>
</div>
<div class="weui-panel weui-panel_access">
<div class="weui-panel__hd">文字组合列表</div>
<div class="weui-panel__bd">
<div class="weui-media-box weui-media-box_text">
<h4 class="weui-media-box__title">标题一</h4>
<p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
</div>
<div class="weui-media-box weui-media-box_text">
<h4 class="weui-media-box__title">标题二</h4>
<p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
</div>
</div>
<div class="weui-panel__ft">
<a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
<div class="weui-cell__bd">查看更多</div>
<span class="weui-cell__ft"></span>
</a>
</div>
</div>
<div class="weui-panel">
<div class="weui-panel__hd">小图文组合列表</div>
<div class="weui-panel__bd">
<div class="weui-media-box weui-media-box_small-appmsg">
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd weui-cell_primary">
<p>文字标题</p>
</div>
<span class="weui-cell__ft"></span>
</a>
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd weui-cell_primary">
<p>文字标题</p>
</div>
<span class="weui-cell__ft"></span>
</a>
</div>
</div>
</div>
</div>
<div class="weui-panel">
<div class="weui-panel__hd">文字列表附来源</div>
<div class="weui-panel__bd">
<div class="weui-media-box weui-media-box_text">
<h4 class="weui-media-box__title">标题一</h4>
<p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
<ul class="weui-media-box__info">
<li class="weui-media-box__info__meta">文字来源</li>
<li class="weui-media-box__info__meta">时间</li>
<li class="weui-media-box__info__meta weui-media-box__info__meta_extra">其它信息</li>
</ul>
</div>
</div>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Picker
picker，选择器，因为picker需要依赖js，
Functions
picker(items, options)
picker 多列选择器。
datePicker(options)
datePicker 时间选择器，由picker拓展而来，提供年、月、日的选择。
picker(items, options)
picker 多列选择器。
Kind: global function
| Param | Type | Default | Description |
|---|---|---|---|
| items | array | picker的数据，即用于生成picker的数据，picker的层级可以自己定义，但建议最多三层。数据格式参考example。 | |
| options | Object | 配置项 | |
| [options.depth] | number | picker深度(也就是picker有多少列) 取值为1-3。如果为空，则取items第一项的深度。 | |
| [options.id] | string | "default" | 作为picker的唯一标识，作用是以id缓存当时的选择。（当你想每次传入的defaultValue都是不一样时，可以使用不同的id区分） |
| [options.className] | string | 自定义类名 | |
| [options.container] | string | 指定容器 | |
| [options.defaultValue] | array | 默认选项的value数组 | |
| [options.onChange] | function | 在picker选中的值发生变化的时候回调 | |
| [options.onConfirm] | function | 在点击"确定"之后的回调。回调返回选中的结果(Array)，数组长度依赖于picker的层级。 |
Example
// 单列picker
weui.picker([
{
label: '飞机票',
value: 0,
disabled: true // 不可用
},
{
label: '火车票',
value: 1
},
{
label: '汽车票',
value: 3
},
{
label: '公车票',
value: 4,
}
], {
className: 'custom-classname',
container: 'body',
defaultValue: [3],
onChange: function (result) {
console.log(result)
},
onConfirm: function (result) {
console.log(result)
},
id: 'singleLinePicker'
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Example
// 多列picker
weui.picker([
{
label: '1',
value: '1'
}, {
label: '2',
value: '2'
}, {
label: '3',
value: '3'
}
], [
{
label: 'A',
value: 'A'
}, {
label: 'B',
value: 'B'
}, {
label: 'C',
value: 'C'
}
], {
defaultValue: ['3', 'A'],
onChange: function (result) {
console.log(result);
},
onConfirm: function (result) {
console.log(result);
},
id: 'multiPickerBtn'
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Example
// 级联picker
weui.picker([
{
label: '飞机票',
value: 0,
children: [
{
label: '经济舱',
value: 1
},
{
label: '商务舱',
value: 2
}
]
},
{
label: '火车票',
value: 1,
children: [
{
label: '卧铺',
value: 1,
disabled: true // 不可用
},
{
label: '坐票',
value: 2
},
{
label: '站票',
value: 3
}
]
},
{
label: '汽车票',
value: 3,
children: [
{
label: '快班',
value: 1
},
{
label: '普通',
value: 2
}
]
}
], {
className: 'custom-classname',
container: 'body',
defaultValue: [1, 3],
onChange: function (result) {
console.log(result)
},
onConfirm: function (result) {
console.log(result)
},
id: 'doubleLinePicker'
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
datePicker(options)
datePicker 时间选择器，由picker拓展而来，提供年、月、日的选择。
Kind: global function
| Param | Type | Default | Description |
|---|---|---|---|
| options | 配置项 | ||
| [options.id] | string | "datePicker" | 作为picker的唯一标识 |
| [options.start] | number | string | Date | 2000 | 起始年份，如果是 Number 类型，表示起始年份；如果是 String 类型，格式为 'YYYY-MM-DD'；如果是 Date 类型，就传一个 Date |
| [options.end] | number | string | Date | 2030 | 结束年份，同上 |
| [options.cron] | string | "* * *" | cron 表达式，三位，分别是 dayOfMonth[1-31]，month[1-12] 和 dayOfWeek[0-6]（周日-周六） |
| [options.className] | string | 自定义类名 | |
| [options.defaultValue] | array | 默认选项的value数组, 如 [1991, 6, 9] | |
| [options.onChange] | function | 在picker选中的值发生变化的时候回调 | |
| [options.onConfirm] | function | 在点击"确定"之后的回调。回调返回选中的结果(Array)，数组长度依赖于picker的层级。 |
Example
// 示例1：
weui.datePicker({
start: 1990,
end: 2000,
defaultValue: [1991, 6, 9],
onChange: function(result){
console.log(result);
},
onConfirm: function(result){
console.log(result);
},
id: 'datePicker'
});
// 示例2：
weui.datePicker({
start: new Date(), // 从今天开始
end: 2030,
defaultValue: [2020, 6, 9],
onChange: function(result){
console.log(result);
},
onConfirm: function(result){
console.log(result);
},
id: 'datePicker'
});
// 示例3：
weui.datePicker({
start: new Date(), // 从今天开始
end: 2030,
cron: '* * 0,6', // 每逢周日、周六
onChange: function(result){
console.log(result);
},
onConfirm: function(result){
console.log(result);
},
id: 'datePicker'
});
// 示例4：
weui.datePicker({
start: new Date(), // 从今天开始
end: 2030,
cron: '1-10 * *', // 每月1日-10日
onChange: function(result){
console.log(result);
},
onConfirm: function(result){
console.log(result);
},
id: 'datePicker'
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Preview
Preview用于实现表单预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-form-preview">
<div class="weui-form-preview__hd">
<label class="weui-form-preview__label">付款金额</label>
<em class="weui-form-preview__value">¥2400.00</em>
</div>
<div class="weui-form-preview__bd">
<p>
<label class="weui-form-preview__label">商品</label>
<span class="weui-form-preview__value">电动打蛋机</span>
</p>
<p>
<label class="weui-form-preview__label">标题标题</label>
<span class="weui-form-preview__value">名字名字名字</span>
</p>
<p>
<label class="weui-form-preview__label">标题标题</label>
<span class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</span>
</p>
</div>
<div class="weui-form-preview__ft">
<a class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">操作</a>
</div>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Progress
Progress，进度条，用于上传、下载等耗时并且需要显示进度的场景，用户可以随时中断该操作。
完整的进度条结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-progress">
<div class="weui-progress__bar">
<div class="weui-progress__inner-bar js_progress" style="width: 0%;"></div>
</div>
<a href="javascript:;" class="weui-progress__opr">
<i class="weui-icon-cancel"></i>
</a>
</div>
<br>
<div class="weui-progress">
<div class="weui-progress__bar">
<div class="weui-progress__inner-bar js_progress" style="width: 50%;"></div>
</div>
<a href="javascript:;" class="weui-progress__opr">
<i class="weui-icon-cancel"></i>
</a>
</div>
<br>
<div class="weui-progress">
<div class="weui-progress__bar">
<div class="weui-progress__inner-bar js_progress" style="width: 80%;"></div>
</div>
<a href="javascript:;" class="weui-progress__opr">
<i class="weui-icon-cancel"></i>
</a>
</div>
<div class="weui-btn-area">
<a href="javascript:;" class="weui-btn weui-btn_primary" id="btnStartProgress">上传</a>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
div.weui-progress__inner-bar 的默认宽度为 0， 改变改元素的宽度（百分比），即可显示不同的进度。
点击 a.weui-progress__opr 元素，可以中断/取消正在进行的操作；如果不需要该操作，则可以省略掉该结构，进度条长度自动适应。
下面模拟改变进度条的值：
$(function(){
var progress = 0;
var $progress = $('.weui-progress__inner-bar');
function uploading(){
$progress.width(++progress % 100 + '%');
setTimeout(uploading, 20);
}
setTimeout(uploading, 20);
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
预览效果如下：
SearchBar
searchBar 搜索栏，类似于微信原生的搜索栏，应用于常见的搜索场景。
详细的代码结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-search-bar" id="search_bar">
<form class="weui-search-bar__form">
<div class="weui-search-bar__box">
<i class="weui-icon-search"></i>
<input type="search" class="weui-search-bar__input" id="search_input" placeholder="搜索" />
<a href="javascript:" class="weui-icon-clear" id="search_clear"></a>
</div>
<label for="search_input" class="weui-search-bar__label" id="search_text">
<i class="weui-icon-search"></i>
<span>搜索</span>
</label>
</form>
<a href="javascript:" class="weui-search-bar__cancel-btn" id="search_cancel">取消</a>
</div>
<div class="weui-cells weui-cells_access search_show" id="search_show">
<div class="weui-cell">
<div class="weui-cell__bd weui-cell_primary">
<p>实时搜索文本</p>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__bd weui-cell_primary">
<p>实时搜索文本</p>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__bd weui-cell_primary">
<p>实时搜索文本</p>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__bd weui-cell_primary">
<p>实时搜索文本</p>
</div>
</div>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Slider
slider，滑块
不带数字的slider
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-slider">
<div class="weui-slider__inner">
<div style="width: 0;" class="weui-slider__track"></div>
<div style="left: 0;" class="weui-slider__handler"></div>
</div>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
末端带数字的slider
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-slider-box">
<div class="weui-slider">
<div class="weui-slider__inner">
<div style="width: 50%;" class="weui-slider__track"></div>
<div style="left: 50%;" class="weui-slider__handler"></div>
</div>
</div>
<div class="weui-slider-box__value">50</div>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
js的配合用法请看： js的配合用法请看： weui.io/#slider
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<script src="https://weui.io/zepto.min.js"></script>
<div class="page">
<div class="page__hd">
<h1 class="page__title">Slider</h1>
<p class="page__desc">滑块</p>
</div>
<div class="page__bd page__bd_spacing">
<div class="weui-slider">
<div class="weui-slider__inner">
<div style="width: 0;" class="weui-slider__track"></div>
<div style="left: 0;" class="weui-slider__handler"></div>
</div>
</div>
<br>
<div class="weui-slider-box">
<div class="weui-slider">
<div id="sliderInner" class="weui-slider__inner">
<div id="sliderTrack" style="width: 50%;" class="weui-slider__track"></div>
<div id="sliderHandler" style="left: 50%;" class="weui-slider__handler"></div>
</div>
</div>
<div id="sliderValue" class="weui-slider-box__value">50</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $sliderTrack = $('#sliderTrack'),
$sliderHandler = $('#sliderHandler'),
$sliderValue = $('#sliderValue');
var totalLen = $('#sliderInner').width(),
startLeft = 0,
startX = 0;
$sliderHandler
.on('touchstart', function (e) {
startLeft = parseInt($sliderHandler.css('left')) * totalLen / 100;
startX = e.changedTouches[0].clientX;
})
.on('touchmove', function(e){
var dist = startLeft + e.changedTouches[0].clientX - startX,
percent;
dist = dist < 0 ? 0 : dist > totalLen ? totalLen : dist;
percent = parseInt(dist / totalLen * 100);
$sliderTrack.css('width', percent + '%');
$sliderHandler.css('left', percent + '%');
$sliderValue.text(percent);
e.preventDefault();
})
;
});
</script>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Tabbar
tabbar，底部导航，通常用作 Web 应用的主界面底部导航，类似于微信主界面的底部“微信”、“通讯录”、“发现”和“我”的导航区。每个功能包含一个图标和该功能简洁的文字描述。
.weui-tabbar 通常作为 .weui-tab 子元素、.weui-tab__panel 的兄弟元素一起使用。结构为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-tab">
<div class="weui-tab__panel">
<div>Page 1</div>
<div style="display:none">Page 2</div>
<div style="display:none">Page 3</div>
</div>
<div class="weui-tabbar">
</div>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
.weui-tab 作为外层容器，高度撑满它的父容器的高度，.weui-tab__panel 作为 tab 的主体内容，占据除了 .weui-tabbar 以外的全部父容器的高度，.weui-tabbar 则为底部的导航栏。而 .weui-tabbar__item 为 .weui-tabbar 的子元素，表示一个导航区，建议不超过 5 个。
图标 .weui-tabbar__icon 约定尺寸为 24px * 24px ，二倍即 48px * 48px。
关于 active 态，开发者根据需要，给当前激活的 .weui-tabbar__item 添加标示的 .weui-bar__item_on 类名，然后控制文字颜色和图标变化。
完整的组件代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-tab">
<div class="weui-tab__panel">
</div>
<div class="weui-tabbar">
<a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
<img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
<p class="weui-tabbar__label">微信</p>
</a>
<a href="javascript:;" class="weui-tabbar__item">
<img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
<p class="weui-tabbar__label">通讯录</p>
</a>
<a href="javascript:;" class="weui-tabbar__item">
<img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
<p class="weui-tabbar__label">发现</p>
</a>
<a href="javascript:;" class="weui-tabbar__item">
<img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
<p class="weui-tabbar__label">我</p>
</a>
</div>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Toast
toast 用于临时显示某些信息，并且会在数秒后自动消失。这些信息通常是轻量级操作的成功信息。
提醒：WeUI 不推荐在 toast 中展示失败状态，失败状态应该使用 Alert 明确告知用户失败原因
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div id="toast" style="/*display: none;*/">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">已完成</p>
</div>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Loading
loading 形态类似于 toast，只是图标是旋转的 loading，用于从服务端拉取数据/向服务端提交数据等耗时操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div id="loadingToast" style="/*display:none;*/">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-loading weui-icon_toast"></i>
<p class="weui-toast__content">数据加载中</p>
</div>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Uploader
Uploader上传组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
</head>
<body>
<!-- 使用start -->
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">图片上传</p>
<div class="weui-uploader__info">0/2</div>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles">
<li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
<li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
<li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
<div class="weui-uploader__file-content">
<i class="weui-icon-warn"></i>
</div>
</li>
<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
<div class="weui-uploader__file-content">50%</div>
</li>
</ul>
<div class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple />
</div>
</div>
</div>
<!-- 使用end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
