新版微信weui基础组件新消息提示Badge组件使用

2017年04月19日 09:27 | 1407次浏览 | 分类: 微信WeUI 作者原创 版权保护

我们在很多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>


三、效果

打开谷歌浏览器,设置手机网页模式浏览案例网页

 微信weui如上图所示,在这里我们模拟的是苹果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>


此文章本站原创,地址 http://www.vxzsk.com/814.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程