图片路径：https://download.csdn.net/download/ypz131023/10825133；（需要的可以私聊给）
示例效果图
js代码块
<div class="weui-tab">
<div class="weui-tab__bd">
<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
<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>
</div>
<!-- /*通讯录*/ -->
<div id="tab2" class="weui-tab__bd-item">
<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="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>
<!-- 发现-->
<div id="tab3" class="weui-tab__bd-item">
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd"><img src="/images/weichat/iconweixinpengyouquan.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>朋友圈</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd"><img src="/images/weichat/saoyisao.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>扫一扫</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="/images/weichat/share.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>摇一摇</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd"><img src="/images/weichat/Sercher.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>看一看</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="/images/weichat/select.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>搜一搜</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd"><img src="/images/weichat/nearpeople.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>附近的人</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="/images/weichat/floatcup.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>漂流瓶</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
</div>
<!--我-->
<div id="tab4" class="weui-tab__bd-item">
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd"><img src="/images/weichat/package.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>钱包 </p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd"><img src="/images/weichat/xiaochengxu.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>小程序</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="/images/weichat/bhj3dweixinqiang.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>收藏</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="/images/weichat/photo.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>相册</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="/images/weichat/cardpackage.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>卡包</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="/images/weichat/emotion.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>表情</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd"><img src="/images/weichat/seting.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>设置</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
</div>
</div>
来源：CSDN
作者：ypz131023
链接：https://blog.csdn.net/ypz131023/article/details/84774982