九宫格
Flex
使用 Flex 实现的栅格
按钮
按钮可以使用 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:
Loading状态
.weui-btn_loading
可以使按钮变为loading状态
列表
Cell,列表视图,用于将信息以列表的结构显示在页面上,是wap上最常用的内容结构。Cell由多个section组成,每个section包括section header weui-cells_title
以及 weui-cells
。
cell由 thumbnailweui-cell__hd
、bodyweui-cell__bd
、accessoryweui-cell__ft
三部分组成,cell采用自适应布局:
简单列表
带图标的列表
带链接的列表
单选列表
复选列表
滑动删除(Swipeout)
Swipeout 可以在列表的某一项中向左滑动出现操作按钮,类似微信聊天列表中的滑动功能。
从 V1.1.0
版本开始可用
初始化
默认情况下,当页面加载完成后,会自动初始化带有 .weui-cell_swiped
类的列表条目,此时不需要做任何手动初始化。
如果你是动态生成的DOM,或者在JS加载之后的DOM,那么这样初始化:
方法
你可以手动调用方法来打开或者关闭
但是请注意,只能同时打开一个swipeout,如果你同时打开多个,之后最后一个会被打开
事件
无论是用户操作,还是调用JS打开或者关闭,都会触发事件,分别是 swipeout-open
和 swipeout-close
表单
表单是基于列表的布局实现的.包括很多常用的表单控件:
文件上传
目前文件上传仅有CSS样式,并没有对应的JS插件。
Gallery
用来全屏预览图片,结合图片上传使用。目前只是静态组件,后序会增强功能.
Slider
用来显示和输入百分比数据,如果没有用JS进行初始化,则为只读。
JS初始化
使用 $('#slider').slider()
进行初始化。
初始化的时候可以传入一个回调函数,当用户进行滑动操作的时候会触发这个回调函数。
消息页面
结果页通常来说可以认为进行一系列操作步骤后,作为流程结束的总结性页面。结果页的作用主要是告知用户操作处理结果以及必要的相关细节(可用于确认之前的操作是否有误)等信息;若该流程用于开启或关闭某些重要功能,可在结果页增加与该功能相关的描述性内容;除此之外,结果页也可以承载一些附加价值操作,例如提供抽奖、关注公众号等功能入口。
进度条
progress用于上传、下载等耗时并且需要显示进度的场景,用户可以随时中断该操作。
对话框
若系统的alert窗体无法满足网页的临时视图内容需求,则可以自定义实现与alert形式相似的dialog,并且在dialog中可以自定义地使用各种控件,来满足需求。
对话框只能通过 JavaScript 进行调用,我们提供了三种常用的对话框 Alert, Confirm, Prompt 和 Login. 你也可以通过 $.modal
来自定义对话框
实际上, Alert, Confirm, Prompt 和 Login 都是 Modal 的一种定制而已。
Alert
显示一段警告消息,有一个确认按钮。
Confirm
显示一段确认消息,有一个确认按钮和一个取消按钮
Prompt
显示一个带有输入框的对话框,可以让用户输入信息
Login
显示一个登录框:
登录框从 V0.8.0
版本可用。
自定义对话框
上述的三种对话框都是 $.modal
的一种特殊形式。你可以通过 $.modal
来定制对话框:
关闭对话框
默认情况下,点击对话框的按钮都会先关闭对话框再触发回调函数。
你可以通过JS来关闭任何正在显示的对话框:
默认配置
对话框的默认是 $.modal.prototype.defaults
,默认配置如下:
Loading
纯静态,显示一个正在加载的提示。
ActionSheet
ActionSheet用于显示包含一系列可交互的动作集合,包括说明、跳转等。由底部弹出,一般用于响应用户对页面的点击。
ActionSheet 只能通过 JavaScript 进行调用:
参数说明
通过 $.actions(params)
方法打开 ActionSheet。可用参数如下:
参数名 |
说明 |
actions |
菜单项,关于每一个菜单项的配置请参见下文 |
title |
可以给弹层设置一个标题,如果不设置则不会显示标题 |
onClose |
关闭弹层的回调函数 |
actions
参数是一个数组,数组中的每一项都是一个菜单。
对每一个菜单的可用配置如下:
参数名 |
说明 |
text |
菜单显示的文案 |
className |
菜单上额外追加的class |
onClick |
点击之后的回调函数 |
颜色配置
从 V0.7.0
开始, 可以通过 className
参数配置不同的颜色或者背景,可以参考右侧的demo用法如下:
所有可用配置如下:
color-primary |
color-success |
color-danger |
color-warning |
bg-primary |
bg-success |
bg-danger |
bg-warning |
Toast
Toast 用于临时显示某些信息,并且会在数秒后自动消失。这些信息通常是轻量级操作的成功、失败或等待状态信息。
Toast 只能通过 JavaScript 进行调用:
Toast 有三种模式可以选择,默认是 成功
模式,还有 取消
和 禁止
两种模式:
从 V0.7.1
版本开始,新增了一个纯文本模式。
参数
Toast 默认时间是 2000 毫秒,可以通过 $.toast.prototype.defaults.duration
来设置这个值。
回调函数
toast可以指定一个回调函数,当toast关闭的时候会调用此函数。
Toptip
显示在页面顶部的轻量级提示,一般用来反馈用户的操作结果,比如表单校验失败等。
JS方法定义如下:
示例:
注意,此组件从 V0.7.2
版本开始才可以使用。
Tabbar
tabbar,底部导航,通常用作 Web 应用的主界面底部导航,类似于微信主界面的底部“微信”、“通讯录”、“发现”和“我”的导航区。每个功能包含一个图标和该功能简洁的文字描述。
.weui-tab
作为外层容器,高度撑满它的父容器的高度,.weui-tab__bd
作为 tab
的主体内容,占据除了 .weui-tabbar
以外的全部父容器的高度,.weui-tabbar
则为底部的导航栏。而 .weui-tabbar__item
为 .weui-tabbar
的子元素,表示一个导航区,建议不超过 5 个。
图标 .weui-tabbar__icon
约定尺寸为 27px * 27px ,二倍即 54px * 54px。
关于 active 态,开发者根据需要,给当前激活的 .weui-tabbar__item
添加标示的 .weui-bar__item--on
类名,然后控制文字颜色和图标变化。
自动切换
在正确的HTML结构前提下,给 .weui-tabbar__item
或者 .weui-navbar__item
加上 href="#id"
指向一个 .weui-tab__bd-item
,即可实现点击的时候自动切换。但是请自行确保初始状态的一致。
基本结构如下所示:
导航栏
因为微信本身就有一个顶部的标题栏,所以这个导航栏其实是在标题栏之下的二级导航栏,因此它实际上就是一个放在页面顶部的 tabbar 而已。
自动切换
在正确的HTML结构前提下,给 .weui-tabbar__item
或者 .weui-navbar__item
加上 href="#id"
指向一个 .weui-tab__bd-item
,即可实现点击的时候自动切换。
初识状态显示的标签,需要自行添加 .weui-bar__item--on
和 .weui-tab__bd-item--active
.
基本结构如下所示:
面板
Preview
搜索栏
搜索栏,类似于微信原生的搜索栏,应用于常见的搜索场景。
通过在 weui-search-bar
上添加 weui-search-bar_focusing
来实现状态切换
loadmore
一个纯静态展示的组件
如果想使用滚动加载,请使用 infinite
图标