基础组件
WeUI 包含了大量常用的组件：按钮，表单，列表，对话框等。这里的组件全部都是官方的样式。

九宫格

  1. <div class="weui-grids">
  2.   <a href="" class="weui-grid js_grid">
  3.     <div class="weui-grid__icon">
  4.       <img src="images/icon_nav_button.png" alt="">
  5.     </div>
  6.     <p class="weui-grid__label">
  7.       Button
  8.     </p>
  9.   </a>
  10.   <a href="" class="weui-grid js_grid">
  11.     <div class="weui-grid__icon">
  12.       <img src="images/icon_nav_cell.png" alt="">
  13.     </div>
  14.     <p class="weui-grid__label">
  15.       List
  16.     </p>
  17.   </a>
  18.   ...
  19. </div>

Flex

使用 Flex 实现的栅格

  1. <div class="weui-flex">
  2.   <div class="weui-flex__item">weui</div>
  3.   <div class="weui-flex__item">weui</div>
  4. </div>

按钮

按钮可以使用 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：

  1. <a href="javascript:;" class="weui-btn weui-btn_primary">按钮</a>
  2. <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">按钮</a>
  3. <a href="javascript:;" class="weui-btn weui-btn_warn">确认</a>
  4. <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">确认</a>
  5. <a href="javascript:;" class="weui-btn weui-btn_default">按钮</a>
  6. <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">按钮</a>
  7. <a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>
  8. <a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a>

Loading状态

.weui-btn_loading 可以使按钮变为loading状态

列表

Cell，列表视图，用于将信息以列表的结构显示在页面上，是wap上最常用的内容结构。Cell由多个section组成，每个section包括section header weui-cells_title 以及 weui-cells。

cell由 thumbnailweui-cellhd、bodyweui-cellbd、accessoryweui-cell__ft三部分组成，cell采用自适应布局：

简单列表

  1. <div class="weui-cells">
  2.   <div class="weui-cell">
  3.     <div class="weui-cell__bd">
  4.       <p>标题文字</p>
  5.     </div>
  6.     <div class="weui-cell__ft">说明文字</div>
  7.   </div>
  8. </div>

带图标的列表

  1. <div class="weui-cells">
  2.   <div class="weui-cell">
  3.     <div class="weui-cell__hd"><img src=""></div>
  4.     <div class="weui-cell__bd">
  5.       <p>标题文字</p>
  6.     </div>
  7.     <div class="weui-cell__ft">说明文字</div>
  8.   </div>
  9.   <div class="weui-cell">
  10.     <div class="weui-cell__hd"><img src=""></div>
  11.     <div class="weui-cell__bd">
  12.       <p>标题文字</p>
  13.     </div>
  14.     <div class="weui-cell__ft">说明文字</div>
  15.   </div>
  16. </div>

带链接的列表

  1. <div class="weui-cells">
  2.   <a class="weui-cell weui-cell_access" href="javascript:;">
  3.     <div class="weui-cell__bd">
  4.       <p>cell standard</p>
  5.     </div>
  6.     <div class="weui-cell__ft">
  7.     </div>
  8.   </a>
  9.   <a class="weui-cell weui-cell_access" href="javascript:;">
  10.     <div class="weui-cell__bd">
  11.       <p>cell standard</p>
  12.     </div>
  13.     <div class="weui-cell__ft">
  14.     </div>
  15.   </a>
  16. </div>

单选列表

  1. <div class="weui-cells weui-cells_radio">
  2.   <label class="weui-cell weui-check__label" for="x11">
  3.     <div class="weui-cell__bd">
  4.       <p>cell standard</p>
  5.     </div>
  6.     <div class="weui-cell__ft">
  7.       <input type="radio" class="weui-check" name="radio1" id="x11">
  8.       <span class="weui-icon-checked"></span>
  9.     </div>
  10.   </label>
  11.   <label class="weui-cell weui-check__label" for="x12">
  13.     <div class="weui-cell__bd">
  14.       <p>cell standard</p>
  15.     </div>
  16.     <div class="weui-cell__ft">
  17.       <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked">
  18.       <span class="weui-icon-checked"></span>
  19.     </div>
  20.   </label>
  21.   <a href="javascript:void(0);" class="weui-cell weui-cell_link">
  22.     <div class="weui-cell__bd">添加更多</div>
  23.   </a>
  24. </div>

复选列表

  1. <div class="weui-cells weui-cells_checkbox">
  2.   <label class="weui-cell weui-check__label" for="s11">
  3.     <div class="weui-cell__hd">
  4.       <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked">
  5.       <i class="weui-icon-checked"></i>
  6.     </div>
  7.     <div class="weui-cell__bd">
  8.       <p>standard is dealt for u.</p>
  9.     </div>
  10.   </label>
  11.   <label class="weui-cell weui-check__label" for="s12">
  12.     <div class="weui-cell__hd">
  13.       <input type="checkbox" name="checkbox1" class="weui-check" id="s12">
  14.       <i class="weui-icon-checked"></i>
  15.     </div>
  16.     <div class="weui-cell__bd">
  17.       <p>standard is dealicient for u.</p>
  18.     </div>
  19.   </label>
  20.   <a href="javascript:void(0);" class="weui-cell weui-cell_link">
  21.     <div class="weui-cell__bd">添加更多</div>
  22.   </a>
  23. </div>

滑动删除(Swipeout)

Swipeout 可以在列表的某一项中向左滑动出现操作按钮，类似微信聊天列表中的滑动功能。

从 V1.1.0 版本开始可用

初始化

默认情况下，当页面加载完成后，会自动初始化带有 .weui-cell_swiped 类的列表条目，此时不需要做任何手动初始化。

如果你是动态生成的DOM，或者在JS加载之后的DOM，那么这样初始化:

  1. $('.weui-cell_swiped').swipeout()

方法

你可以手动调用方法来打开或者关闭

  1. $('.weui-cell_swiped').swipeout('open') //打开
  2. $('.weui-cell_swiped').swipeout('close') //关闭

但是请注意，只能同时打开一个swipeout，如果你同时打开多个，之后最后一个会被打开

事件

无论是用户操作，还是调用JS打开或者关闭，都会触发事件，分别是 swipeout-open 和 swipeout-close

表单

表单是基于列表的布局实现的.包括很多常用的表单控件：

  1. <div class="weui-cells weui-cells_form">
  2.   <div class="weui-cell">
  3.     <div class="weui-cell__hd"><label class="weui-label">qq</label></div>
  4.     <div class="weui-cell__bd">
  5.       <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入qq号">
  6.     </div>
  7.   </div>
  8.   <div class="weui-cell weui-cell_vcode">
  9.     <div class="weui-cell__hd">
  10.       <label class="weui-label">手机号</label>
  11.     </div>
  12.     <div class="weui-cell__bd">
  13.       <input class="weui-input" type="tel" placeholder="请输入手机号">
  14.     </div>
  15.     <div class="weui-cell__ft">
  16.       <button class="weui-vcode-btn">获取验证码</button>
  17.     </div>
  18.   </div>
  19.   <div class="weui-cell">
  20.     <div class="weui-cell__hd"><label for="" class="weui-label">日期</label></div>
  21.     <div class="weui-cell__bd">
  22.       <input class="weui-input" type="date" value="">
  23.     </div>
  24.   </div>
  25.   <div class="weui-cell">
  26.     <div class="weui-cell__hd"><label for="" class="weui-label">时间</label></div>
  27.     <div class="weui-cell__bd">
  28.       <input class="weui-input" type="datetime-local" value="" placeholder="">
  29.     </div>
  30.   </div>
  31.   <div class="weui-cell weui-cell_vcode">
  32.     <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
  33.     <div class="weui-cell__bd">
  34.       <input class="weui-input" type="number" placeholder="请输入验证码">
  35.     </div>
  36.     <div class="weui-cell__ft">
  37.       <img class="weui-vcode-img" src="./images/vcode.jpg">
  38.     </div>
  39.   </div>
  40. </div>
  41. <div class="weui-cells__tips">底部说明文字底部说明文字</div>
  43. <div class="weui-cells__title">表单报错</div>
  44. <div class="weui-cells weui-cells_form">
  45.   <div class="weui-cell weui-cell_warn">
  46.     <div class="weui-cell__hd"><label for="" class="weui-label">卡号</label></div>
  47.     <div class="weui-cell__bd">
  48.       <input class="weui-input" type="number" pattern="[0-9]*" value="weui input error" placeholder="请输入卡号">
  49.     </div>
  50.     <div class="weui-cell__ft">
  51.       <i class="weui-icon-warn"></i>
  52.     </div>
  53.   </div>
  54. </div>
  57. <div class="weui-cells__title">开关</div>
  58. <div class="weui-cells weui-cells_form">
  59.   <div class="weui-cell weui-cell_switch">
  60.     <div class="weui-cell__bd">标题文字</div>
  61.     <div class="weui-cell__ft">
  62.       <input class="weui-switch" type="checkbox">
  63.     </div>
  64.   </div>
  65.   <div class="weui-cell weui-cell_switch">
  66.     <div class="weui-cell__bd">兼容IE Edge的版本</div>
  67.     <div class="weui-cell__ft">
  68.       <label for="switchCP" class="weui-switch-cp">
  69.         <input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked">
  70.         <div class="weui-switch-cp__box"></div>
  71.       </label>
  72.     </div>
  73.   </div>
  74. </div>
  76. <div class="weui-cells__title">文本框</div>
  77. <div class="weui-cells">
  78.   <div class="weui-cell">
  79.     <div class="weui-cell__bd">
  80.       <input class="weui-input" type="text" placeholder="请输入文本">
  81.     </div>
  82.   </div>
  83. </div>
  85. <div class="weui-cells__title">文本域</div>
  86. <div class="weui-cells weui-cells_form">
  87.   <div class="weui-cell">
  88.     <div class="weui-cell__bd">
  89.       <textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
  90.       <div class="weui-textarea-counter"><span>0</span>/200</div>
  91.     </div>
  92.   </div>
  93. </div>

文件上传

目前文件上传仅有CSS样式，并没有对应的JS插件。

  1. <div class="weui-cells weui-cells_form">
  2.   <div class="weui-cell">
  3.     <div class="weui-cell__bd">
  4.       <div class="weui-uploader">
  5.         <div class="weui-uploader__hd">
  6.           <p class="weui-uploader__title">图片上传</p>
  7.           <div class="weui-uploader__info">0/2</div>
  8.         </div>
  9.         <div class="weui-uploader__bd">
  10.           <ul class="weui-uploader__files" id="uploaderFiles">
  11.             <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
  12.             <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
  13.             <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
  14.             <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
  15.               <div class="weui-uploader__file-content">
  16.                 <i class="weui-icon-warn"></i>
  17.               </div>
  18.             </li>
  19.             <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
  20.               <div class="weui-uploader__file-content">50%</div>
  21.             </li>
  22.           </ul>
  23.           <div class="weui-uploader__input-box">
  24.             <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
  25.           </div>
  26.         </div>
  27.       </div>
  28.     </div>
  29.   </div>
  30. </div>

用来全屏预览图片，结合图片上传使用。目前只是静态组件，后序会增强功能.

  1. <div class="weui-gallery" style="display: block">
  2.   <span class="weui-gallery__img" style="background-image: url(xxx);"></span>
  3.   <div class="weui-gallery__opr">
  4.     <a href="javascript:" class="weui-gallery__del">
  5.       <i class="weui-icon-delete weui-icon_gallery-delete"></i>
  6.     </a>
  7.   </div>
  8. </div>

Slider

用来显示和输入百分比数据，如果没有用JS进行初始化，则为只读。

  1. <div class="weui-slider">
  2.   <div class="weui-slider__inner">
  3.     <div style="width: 30%;" class="weui-slider__track"></div>
  4.     <div style="left: 30%;" class="weui-slider__handler"></div>
  5.   </div>
  6. </div>

JS初始化

使用 $('#slider').slider() 进行初始化。

初始化的时候可以传入一个回调函数，当用户进行滑动操作的时候会触发这个回调函数。

  1. <div class="weui-slider-box" id="slider1">
  2.   <div class="weui-slider">
  3.     <div id="sliderInner" class="weui-slider__inner">
  4.       <div id="sliderTrack" style="width: 75%;" class="weui-slider__track"></div>
  5.       <div id="sliderHandler" style="left: 75%;" class="weui-slider__handler"></div>
  6.     </div>
  7.   </div>
  8.   <div id="sliderValue" class="weui-slider-box__value">75</div>
  9. </div>
  10. <script>
  11.   $('#slide1').slider(function (percent) {
  12.     console.log(percent)
  13.   })
  14. </script>

消息页面

结果页通常来说可以认为进行一系列操作步骤后，作为流程结束的总结性页面。结果页的作用主要是告知用户操作处理结果以及必要的相关细节（可用于确认之前的操作是否有误）等信息；若该流程用于开启或关闭某些重要功能，可在结果页增加与该功能相关的描述性内容；除此之外，结果页也可以承载一些附加价值操作，例如提供抽奖、关注公众号等功能入口。

  1. <div class="weui-msg">
  2.   <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
  3.   <div class="weui-msg__text-area">
  4.     <h2 class="weui-msg__title">操作成功</h2>
  5.     <p class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<a href="javascript:void(0);">文字链接</a></p>
  6.   </div>
  7.   <div class="weui-msg__opr-area">
  8.     <p class="weui-btn-area">
  9.       <a href="javascript:;" class="weui-btn weui-btn_primary">推荐操作</a>
  10.       <a href="javascript:;" class="weui-btn weui-btn_default">辅助操作</a>
  11.     </p>
  12.   </div>
  13.   <div class="weui-msg__extra-area">
  14.     <div class="weui-footer">
  15.       <p class="weui-footer__links">
  16.         <a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a>
  17.       </p>
  18.       <p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
  19.     </div>
  20.   </div>
  21. </div>

进度条

progress用于上传、下载等耗时并且需要显示进度的场景，用户可以随时中断该操作。

  1. <div class="weui-progress">
  2.   <div class="weui-progress__bar">
  3.     <div class="weui-progress__inner-bar js_progress" style="width: 50%;"></div>
  4.   </div>
  5.   <a href="javascript:;" class="weui-progress__opr">
  6.     <i class="weui-icon-cancel"></i>
  7.   </a>
  8. </div>
  9. <br>
  10. <div class="weui-progress">
  11.   <div class="weui-progress__bar">
  12.     <div class="weui-progress__inner-bar js_progress" style="width: 80%;"></div>
  13.   </div>
  14.   <a href="javascript:;" class="weui-progress__opr">
  15.     <i class="weui-icon-cancel"></i>
  16.   </a>
  17. </div>

对话框

若系统的alert窗体无法满足网页的临时视图内容需求，则可以自定义实现与alert形式相似的dialog，并且在dialog中可以自定义地使用各种控件，来满足需求。

对话框只能通过 JavaScript 进行调用，我们提供了三种常用的对话框 Alert, Confirm, Prompt 和 Login. 你也可以通过 $.modal 来自定义对话框

实际上， Alert, Confirm, Prompt 和 Login 都是 Modal 的一种定制而已。

Alert

显示一段警告消息，有一个确认按钮。

  1. $.alert("自定义的消息内容");
  2. $.alert("自定义的消息内容", "自定义的标题");
  3. $.alert("自定义的消息内容", function() {
  4.   //点击确认后的回调函数
  5. });
  6. $.alert("自定义的消息内容", "标题", function() {
  7.   //点击确认后的回调函数
  8. });
  10. //如果参数过多，通过 object 方式传入
  11. $.alert({
  12.   title: '标题',
  13.   text: '内容文案',
  14.   onOK: function () {
  15.     //点击确认
  16.   }
  17. });

Confirm

显示一段确认消息，有一个确认按钮和一个取消按钮

  1. $.confirm("自定义的消息内容");
  2. $.confirm("自定义的消息内容", "自定义的标题");
  3. $.confirm("自定义的消息内容", function() {
  4.   //点击确认后的回调函数
  5.   }, function() {
  6.   //点击取消后的回调函数
  7.   });
  10. //如果参数过多，建议通过 object 方式传入
  11. $.confirm({
  12.   title: '标题',
  13.   text: '内容文案',
  14.   onOK: function () {
  15.     //点击确认
  16.   },
  17.   onCancel: function () {
  18.   }
  19. });

Prompt

显示一个带有输入框的对话框,可以让用户输入信息

  1. $.prompt("自定义的消息内容", function(text) {
  2.   //点击确认后的回调函数
  3.   //text 是用户输入的内容
  4. }, function() {
  5.   //点击取消后的回调函数
  6. });
  8. //如果参数过多，建议通过 object 方式传入
  9. $.prompt({
  10.   title: '标题',
  11.   text: '内容文案',
  12.   input: '输入框默认值',
  13.   empty: false, // 是否允许为空
  14.   onOK: function (input) {
  15.     //点击确认
  16.   },
  17.   onCancel: function () {
  18.     //点击取消
  19.   }
  20. });

Login

显示一个登录框：

  1. $.login("自定义的消息内容", function(username, password) {
  2.   // 这里进行登录操作
  3. }, function() {
  4. });
  6. //如果参数过多，建议通过 object 方式传入
  7. $.login({
  8.   title: '标题',
  9.   text: '内容文案',
  10.   username: 'tom',  // 默认用户名
  11.   password: 'tom',  // 默认密码
  12.   onOK: function (username, password) {
  13.     //点击确认
  14.   },
  15.   onCancel: function () {
  16.     //点击取消
  17.   }
  18. });

登录框从 V0.8.0 版本可用。

自定义对话框

上述的三种对话框都是 $.modal 的一种特殊形式。你可以通过 $.modal 来定制对话框:

  1. $.modal({
  2.   title: "Hello",
  3.   text: "我是自定义的modal",
  4.   buttons: [
  5.     { text: "支付宝", onClick: function(){ console.log(1)} },
  6.     { text: "微信支付", onClick: function(){ console.log(2)} },
  7.     { text: "取消", className: "default", onClick: function(){ console.log(3)} },
  8.   ]
  9. });

关闭对话框

默认情况下，点击对话框的按钮都会先关闭对话框再触发回调函数。

你可以通过JS来关闭任何正在显示的对话框:

  1. $.closeModal();

默认配置

对话框的默认是 $.modal.prototype.defaults，默认配置如下：

  1. defaults = $.modal.prototype.defaults = {
  2.   title: "提示",
  3.   text: undefined,
  4.   buttonOK: "确定",
  5.   buttonCancel: "取消",
  6.   buttons: [{
  7.     text: "确定",
  8.     className: "primary"
  9.   }],
  10.   autoClose: true //点击按钮自动关闭对话框，如果你不希望点击按钮就关闭对话框，可以把这个设置为false
  11. };

Loading

纯静态，显示一个正在加载的提示。

  1. <div class="weui-loadmore">
  2.   <i class="weui-loading"></i>
  3.   <span class="weui-loadmore__tips">正在加载</span>
  4. </div>
  5. <div class="weui-loadmore weui-loadmore_line">
  6.   <span class="weui-loadmore__tips">暂无数据</span>
  7. </div>
  8. <div class="weui-loadmore weui-loadmore_line weui-loadmore_dot">
  9.   <span class="weui-loadmore__tips"></span>
  10. </div>

ActionSheet

ActionSheet用于显示包含一系列可交互的动作集合，包括说明、跳转等。由底部弹出，一般用于响应用户对页面的点击。

ActionSheet 只能通过 JavaScript 进行调用:

  1. $.actions({
  2.   actions: [{
  3.     text: "编辑",
  4.     onClick: function() {
  5.       //do something
  6.     }
  7.   },{
  8.     text: "删除",
  9.     onClick: function() {
  10.       //do something
  11.     }
  12.   }]
  13. });

参数说明

通过 $.actions(params) 方法打开 ActionSheet。可用参数如下：

参数名 说明
actions 菜单项，关于每一个菜单项的配置请参见下文
title 可以给弹层设置一个标题，如果不设置则不会显示标题
onClose 关闭弹层的回调函数

actions 参数是一个数组，数组中的每一项都是一个菜单。

对每一个菜单的可用配置如下：

参数名 说明
text 菜单显示的文案
className 菜单上额外追加的class
onClick 点击之后的回调函数

颜色配置

从 V0.7.0 开始， 可以通过 className 参数配置不同的颜色或者背景，可以参考右侧的demo用法如下：

  1. $.actions({
  2.   actions: [
  3.     {
  4.       text: "发布",
  5.       className: "color-primary",
  6.     },
  7.   ...
  8. });

所有可用配置如下：

|color-primary|color-success|color-danger|color-warning
|bg-primary|bg-success|bg-danger|bg-warning

Toast

Toast 用于临时显示某些信息，并且会在数秒后自动消失。这些信息通常是轻量级操作的成功、失败或等待状态信息。

Toast 只能通过 JavaScript 进行调用:

  1. $.toast();
  2. $.toast("操作成功");

Toast 有三种模式可以选择，默认是 成功 模式，还有 取消 和 禁止 两种模式:

从 V0.7.1 版本开始，新增了一个纯文本模式。

  1. $.toast("取消操作", "cancel");
  2. $.toast("禁止操作", "forbidden");
  3. $.toast("纯文本", "text");
  4. // 第二个参数可以是时间，单位毫秒
  5. $.toast("消息", 20000);

参数

Toast 默认时间是 2000 毫秒，可以通过 $.toast.prototype.defaults.duration 来设置这个值。

回调函数

toast可以指定一个回调函数，当toast关闭的时候会调用此函数。

  1. $.toast("取消操作", function() {
  2.   console.log("cancel");
  3. });
  4. $.toast("禁止操作", "forbidden", function() {
  5.   //do something
  6. });

Toptip

显示在页面顶部的轻量级提示，一般用来反馈用户的操作结果，比如表单校验失败等。

JS方法定义如下：

  1. $.toptip(text, [duration, type]);

示例：

  1. $.toptip('操作成功', 'success');
  2. $.toptip('操作失败', 'error');
  3. $.toptip('警告', 'warning');
  5. $.toptip('操作成功', 2000, 'success');  //设置显示时间

注意，此组件从 V0.7.2 版本开始才可以使用。

Tabbar

tabbar，底部导航，通常用作 Web 应用的主界面底部导航，类似于微信主界面的底部“微信”、“通讯录”、“发现”和“我”的导航区。每个功能包含一个图标和该功能简洁的文字描述。

  1. <div class="weui-tab">
  2.   <div class="weui-navbar">
  3.     <div class="weui-navbar__item weui-bar__item--on">
  4.       选项一
  5.     </div>
  6.     <div class="weui-navbar__item">
  7.       选项二
  8.     </div>
  9.     <div class="weui-navbar__item">
  10.       选项三
  11.     </div>
  12.   </div>
  13.   <div class="weui-tab__bd">
  15.     <input type="text" id="a">
  17.   </div>
  19.   <div class="weui-tabbar">
  20.     <a href="javascript:;" class="weui-tabbar__item weui-bar__item--on">
  21.       <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>
  22.       <div class="weui-tabbar__icon">
  23.         <img src="./images/icon_nav_button.png" alt="">
  24.       </div>
  25.       <p class="weui-tabbar__label">微信</p>
  26.     </a>
  27.     <a href="javascript:;" class="weui-tabbar__item">
  28.       <div class="weui-tabbar__icon">
  29.         <img src="./images/icon_nav_msg.png" alt="">
  30.       </div>
  31.       <p class="weui-tabbar__label">通讯录</p>
  32.     </a>
  33.     <a href="javascript:;" class="weui-tabbar__item">
  34.       <div class="weui-tabbar__icon">
  35.         <img src="./images/icon_nav_article.png" alt="">
  36.       </div>
  37.       <p class="weui-tabbar__label">发现</p>
  38.     </a>
  39.     <a href="javascript:;" class="weui-tabbar__item">
  40.       <div class="weui-tabbar__icon">
  41.         <img src="./images/icon_nav_cell.png" alt="">
  42.       </div>
  43.       <p class="weui-tabbar__label">我</p>
  44.     </a>
  45.   </div>
  46. </div>

.weui-tab 作为外层容器，高度撑满它的父容器的高度，.weui-tabbd 作为 tab 的主体内容，占据除了 .weui-tabbar 以外的全部父容器的高度，.weui-tabbar 则为底部的导航栏。而 .weui-tabbaritem 为 .weui-tabbar 的子元素，表示一个导航区，建议不超过 5 个。

图标 .weui-tabbar__icon 约定尺寸为 27px 27px ，二倍即 54px 54px。

关于 active 态，开发者根据需要，给当前激活的 .weui-tabbaritem 添加标示的 .weui-baritem—on 类名，然后控制文字颜色和图标变化。

自动切换

在正确的HTML结构前提下，给 .weui-tabbaritem 或者 .weui-navbaritem 加上 href="#id" 指向一个 .weui-tab__bd-item，即可实现点击的时候自动切换。但是请自行确保初始状态的一致。

基本结构如下所示：

  1. <!-- 容器 -->
  2. <div class="weui-tab">
  3.   <div class="weui-tab__bd">
  4.     <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
  5.       <h1>页面一</h1>
  6.     </div>
  7.     <div id="tab2" class="weui-tab__bd-item">
  8.       <h1>页面二</h1>
  9.     </div>
  10.     ...
  11.   </div>
  13.   <div class="weui-tabbar">
  14.     <a href="#tab1" class="weui-tabbar__item weui-bar__item--on">
  15.       ...
  16.     </a>
  17.     <a href="#tab2" class="weui-tabbar__item">
  18.       ...
  19.     </a>
  20.     ...
  21.   </div>
  22. </div>

导航栏

因为微信本身就有一个顶部的标题栏，所以这个导航栏其实是在标题栏之下的二级导航栏，因此它实际上就是一个放在页面顶部的 tabbar 而已。

  1. <div class="weui-navbar">
  2.   <div class="weui-navbar__item weui_bar__item_on">
  3.     选项一
  4.   </div>
  5.   <div class="weui-navbar__item">
  6.     选项二
  7.   </div>
  8.   <div class="weui-navbar__item">
  9.     选项三
  10.   </div>
  11. </div>

自动切换

在正确的HTML结构前提下，给 .weui-tabbaritem 或者 .weui-navbaritem 加上 href="#id" 指向一个 .weui-tab__bd-item，即可实现点击的时候自动切换。

初识状态显示的标签，需要自行添加 .weui-baritem—on 和 .weui-tabbd-item—active.

基本结构如下所示：

  1. <!-- 容器 -->
  2. <div class="weui-tab">
  3.   <div class="weui-navbar">
  4.     <a class="weui-navbar__item weui-bar__item--on" href="#tab1">
  5.       选项一
  6.     </a>
  7.     <a class="weui-navbar__item" href="#tab2">
  8.       选项二
  9.     </a>
  10.     ...
  11.   </div>
  12.   <div class="weui-tab__bd">
  13.     <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
  14.       <h1>页面一</h1>
  15.     </div>
  16.     <div id="tab2" class="weui-tab__bd-item">
  17.       <h1>页面二</h1>
  18.     </div>
  19.     ...
  20.   </div>
  21. </div>

面板

  1. <div class="weui-panel weui-panel_access">
  2.   <div class="weui-panel__hd">图文组合列表</div>
  3.   <div class="weui-panel__bd">
  4.     <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
  5.       <div class="weui-media-box__hd">
  6.         <img class="weui-media-box__thumb" src="">
  7.       </div>
  8.       <div class="weui-media-box__bd">
  9.         <h4 class="weui-media-box__title">标题一</h4>
  10.         <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
  11.       </div>
  12.     </a>
  13.     <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
  14.       <div class="weui-media-box__hd">
  15.         <img class="weui-media-box__thumb" src="">
  16.       </div>
  17.       <div class="weui-media-box__bd">
  18.         <h4 class="weui-media-box__title">标题二</h4>
  19.         <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
  20.       </div>
  21.     </a>
  22.   </div>
  23.   <div class="weui-panel__ft">
  24.     <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
  25.       <div class="weui-cell__bd">查看更多</div>
  26.       <span class="weui-cell__ft"></span>
  27.     </a>    
  28.   </div>
  29. </div>

Preview

  1. <div class="weui-form-preview">
  2.   <div class="weui-form-preview__hd">
  3.     <label class="weui-form-preview__label">付款金额</label>
  4.     <em class="weui-form-preview__value">¥2400.00</em>
  5.   </div>
  6.   <div class="weui-form-preview__bd">
  7.     <div class="weui-form-preview__item">
  8.       <label class="weui-form-preview__label">商品</label>
  9.       <span class="weui-form-preview__value">电动打蛋机</span>
  10.     </div>
  11.     <div class="weui-form-preview__item">
  12.       <label class="weui-form-preview__label">标题标题</label>
  13.       <span class="weui-form-preview__value">名字名字名字</span>
  14.     </div>
  15.     <div class="weui-form-preview__item">
  16.       <label class="weui-form-preview__label">标题标题</label>
  17.       <span class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</span>
  18.     </div>
  19.   </div>
  20.   <div class="weui-form-preview__ft">
  21.     <a class="weui-form-preview__btn weui-form-preview__btn_default" href="javascript:">辅助操作</a>
  22.     <button type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">操作</button>
  23.   </div>
  24. </div>

搜索栏

搜索栏，类似于微信原生的搜索栏，应用于常见的搜索场景。

  1. <div class="weui-search-bar" id="searchBar">
  2.   <form class="weui-search-bar__form">
  3.     <div class="weui-search-bar__box">
  4.       <i class="weui-icon-search"></i>
  5.       <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
  6.       <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
  7.     </div>
  8.     <label class="weui-search-bar__label" id="searchText">
  9.       <i class="weui-icon-search"></i>
  10.       <span>搜索</span>
  11.     </label>
  12.   </form>
  13.   <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
  14. </div>

通过在 weui-search-bar 上添加 weui-search-bar_focusing 来实现状态切换

loadmore

一个纯静态展示的组件

如果想使用滚动加载，请使用 infinite

  1. <div class="weui-loadmore">
  2.   <i class="weui-loading"></i>
  3.   <span class="weui-loadmore__tips">正在加载</span>
  4. </div>
  5. <div class="weui-loadmore weui-loadmore_line">
  6.   <span class="weui-loadmore__tips">暂无数据</span>
  7. </div>
  8. <div class="weui-loadmore weui-loadmore_line weui-loadmore_dot">
  9.   <span class="weui-loadmore__tips"></span>
  10. </div>

一个简单的页脚

  1. <div class="weui-footer">
  2.   <p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
  3. </div>
  5. <div class="weui-footer">
  6.   <p class="weui-footer__links">
  7.     <a href="javascript:void(0);" class="weui-footer__link">底部链接</a>
  8.   </p>
  9.   <p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
  10. </div>
  12. <div class="weui-footer">
  13.   <p class="weui-footer__links">
  14.     <a href="javascript:void(0);" class="weui-footer__link">底部链接</a>
  15.     <a href="javascript:void(0);" class="weui-footer__link">底部链接</a>
  16.   </p>
  17.   <p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
  18. </div>

加上 .weui-footer_fixed-bottom 可以固定在底部

图标

  1. <i class="weui-icon-success weui-icon_msg"></i>
  2. <i class="weui-icon-info weui-icon_msg"></i>
  3. <i class="weui-icon-warn weui-icon_msg-primary"></i>
  4. <i class="weui-icon-warn weui-icon_msg"></i>
  5. <i class="weui-icon-waiting weui-icon_msg"></i>
  7. <i class="weui-icon-success"></i>
  8. <i class="weui-icon-success-no-circle"></i>
  9. <i class="weui-icon-circle"></i>
  10. <i class="weui-icon-warn"></i>
  11. <i class="weui-icon-download"></i>
  12. <i class="weui-icon-info-circle"></i>
  13. <i class="weui-icon-cancel"></i>
  14. <i class="weui-icon-search"></i>