我们在很多app中发现只要有新消息提示，就会明显看到列表项上面有红色并代表消息数目的数字，这样给用户能以最快的速度接收最新消息并打开阅读，当然微信weui也提供了这样一个组件，组件名称为Badge ,接下来我们来介绍Badge的使用方法。
案例中引用的微信weui的css样式库我已经上传到百度网盘了，地址 http://pan.baidu.com/s/1cvQlLc ，大家可以下载下来进行引用，当然你也可以引用网络地址，但是有个弊端，微信weui的样式库更新比较频繁，可能将来某一天会失效，所以最好下载到本地使用。
一，引入css文件
<link rel="stylesheet" href="https://weui.io/weui.css"> <link rel="stylesheet" href="https://weui.io/example.css">
记得html设置成移动浏览
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"
二、Badge组件案例html代码
在<body></body>之间添加如下代码
<div class="page badge js_show"> <div class="page__hd"> <h1 class="page__title">Badge</h1> <p class="page__desc">徽章(www.vxzsk.com V型知识库原创)</p> </div> <div class="page__bd"> <div class="weui-cells__title">新消息提示跟摘要信息后，统一在列表右侧</div> <div class="weui-cells"> <div class="weui-cell weui-cell_access"> <div class="weui-cell__bd">单行列表</div> <div class="weui-cell__ft" style="font-size: 0"> <span style="vertical-align:middle; font-size: 17px;">详细信息</span> <span class="weui-badge weui-badge_dot" style="margin-left: 5px;margin-right: 5px;"></span> </div> </div> </div> <div class="weui-cells__title">未读数红点跟在主题信息后，统一在列表左侧</div> <div class="weui-cells"> <div class="weui-cell"> <div class="weui-cell__hd" style="position: relative;margin-right: 10px;"> <img src="https://weui.io/images/pic_160.png" style="width: 50px;display: block"> <span class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">8</span> </div> <div class="weui-cell__bd"> <p>联系人名称</p> <p style="font-size: 13px;color: #888888;">摘要信息</p> </div> </div> <div class="weui-cell weui-cell_access"> <div class="weui-cell__bd"> <span style="vertical-align: middle">单行列表</span> <span class="weui-badge" style="margin-left: 5px;">8</span> </div> <div class="weui-cell__ft"></div> </div> <div class="weui-cell weui-cell_access"> <div class="weui-cell__bd"> <span style="vertical-align: middle">单行列表</span> <span class="weui-badge" style="margin-left: 5px;">8</span> </div> <div class="weui-cell__ft">详细信息</div> </div> <div class="weui-cell weui-cell_access"> <div class="weui-cell__bd"> <span style="vertical-align: middle">单行列表</span> <span class="weui-badge" style="margin-left: 5px;">New</span> </div> <div class="weui-cell__ft"></div> </div> </div> </div> <div class="page__ft j_bottom"> <a href="javascript:home()"><img src="http://weui.io/images/icon_footer_link.png"></a> </div> </div>
三、效果
打开谷歌浏览器，设置手机网页模式浏览案例网页
如上图所示，在这里我们模拟的是苹果6PLUS下的效果。
四、完整html代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>微信weui的Badge组件--V型知识库</title> </head> <link rel="stylesheet" href="https://weui.io/weui.css"> <link rel="stylesheet" href="https://weui.io/example.css"> <body> <div class="page badge js_show"> <div class="page__hd"> <h1 class="page__title">Badge</h1> <p class="page__desc">徽章(www.vxzsk.com V型知识库原创)</p> </div> <div class="page__bd"> <div class="weui-cells__title">新消息提示跟摘要信息后，统一在列表右侧</div> <div class="weui-cells"> <div class="weui-cell weui-cell_access"> <div class="weui-cell__bd">单行列表</div> <div class="weui-cell__ft" style="font-size: 0"> <span style="vertical-align:middle; font-size: 17px;">详细信息</span> <span class="weui-badge weui-badge_dot" style="margin-left: 5px;margin-right: 5px;"></span> </div> </div> </div> <div class="weui-cells__title">未读数红点跟在主题信息后，统一在列表左侧</div> <div class="weui-cells"> <div class="weui-cell"> <div class="weui-cell__hd" style="position: relative;margin-right: 10px;"> <img src="https://weui.io/images/pic_160.png" style="width: 50px;display: block"> <span class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">8</span> </div> <div class="weui-cell__bd"> <p>联系人名称</p> <p style="font-size: 13px;color: #888888;">摘要信息</p> </div> </div> <div class="weui-cell weui-cell_access"> <div class="weui-cell__bd"> <span style="vertical-align: middle">单行列表</span> <span class="weui-badge" style="margin-left: 5px;">8</span> </div> <div class="weui-cell__ft"></div> </div> <div class="weui-cell weui-cell_access"> <div class="weui-cell__bd"> <span style="vertical-align: middle">单行列表</span> <span class="weui-badge" style="margin-left: 5px;">8</span> </div> <div class="weui-cell__ft">详细信息</div> </div> <div class="weui-cell weui-cell_access"> <div class="weui-cell__bd"> <span style="vertical-align: middle">单行列表</span> <span class="weui-badge" style="margin-left: 5px;">New</span> </div> <div class="weui-cell__ft"></div> </div> </div> </div> <div class="page__ft j_bottom"> <a href="javascript:home()"><img src="http://weui.io/images/icon_footer_link.png"></a> </div> </div> </body> </html>
此文章本站原创，地址 https://www.vxzsk.com/814.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：mongodb php
下一篇：MongoDB高级教程
^