前言

关于WeUI框架文章的一些写法改变，前俩章写得太过于啰嗦，我想一般看技术文章的同学的人也是有一定阅读代码的能力了，之后排码我会直接用代码加效果图连发接上，在尾部我会把一些新出现的引用类名注释清楚，一些已经出现过的在之前的文章上有注释过在本章不会在此注释。以便同学阅读。

【一】列表 部分

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

cell由thumbnailweui-cell__hd、bodyweui-cell__bd、accessoryweui-cell__ft三部分组成，其中weui-cell__bd采用自适应布局.

具体代码如下：

<div class="weui-cells__title" style="margin-top: 50px;">带说明的列表项</div>
			<div class="weui-cells">
			    <div class="weui-cell">
			        <div class="weui-cell__bd">
			            <p>标题文字</p>
			        </div>
			        <div class="weui-cell__ft">说明文字</div>
			    </div>
			    <div class="weui-cell weui-cell_swiped">
                <div class="weui-cell__bd" style="transform: translateX(-68px)">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <p>标题文字</p>
                        </div>
                        <div class="weui-cell__ft">说明文字</div>
                    </div>
                </div>
                <div class="weui-cell__ft">
                    <a class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:">删除</a>
                </div>
            </div>
			</div>
			
			<div class="weui-cells__title">带图标、说明的列表项</div>
			<div class="weui-cells">
			    <div class="weui-cell">
			        <div class="weui-cell__hd"><img src="img/下载.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>
			    </div>
			    <div class="weui-cell">
			        <div class="weui-cell__hd"><img src="img/下载.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>
			    </div>
			</div>
			
			<div class="weui-cells__title">带跳转的列表项</div>
			<div class="weui-cells">
			    <a class="weui-cell weui-cell_access" href="javascript:;">
			        <div class="weui-cell__bd">
			            <p>cell standard</p>
			        </div>
			        <div class="weui-cell__ft">
			        	说明文字
			        </div>
			    </a>
			    <a class="weui-cell weui-cell_access" href="javascript:;">
			        <div class="weui-cell__bd">
			            <p>cell standard</p>
			        </div>
			        <div class="weui-cell__ft">
			        	说明文字
			        </div>
			    </a>
			</div>
			
			<div class="weui-cells__title">带说明、跳转的列表项</div>
			<div class="weui-cells">
			    <a class="weui-cell weui-cell_access" href="javascript:;">
			        <div class="weui-cell__bd">
			            <p>cell standard</p>
			        </div>
			        <div class="weui-cell__ft">说明文字</div>
			    </a>
			    <a class="weui-cell weui-cell_access" href="javascript:;">
			        <div class="weui-cell__bd">
			            <p>cell standard</p>
			        </div>
			        <div class="weui-cell__ft">说明文字</div>
			    </a>
			
			</div>
			
			<div class="weui-cells__title">带图标、说明、跳转的列表项</div>
			<div class="weui-cells">
			
			    <a class="weui-cell weui-cell_access" href="javascript:;">
			        <div class="weui-cell__hd"><img src="img/下载.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
			        <div class="weui-cell__bd">
			            <p>cell standard</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="img/下载.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
			        <div class="weui-cell__bd">
			            <p>cell standard</p>
			        </div>
			        <div class="weui-cell__ft">说明文字</div>
			    </a>
			</div>

效果图：

代码分析：

从一个最基础的列表代码看下来，列表组件主要分3个部分。

weui-cell：列表（通常配合列表组一用 weui-cells）

weui-cell__hd：列表的头部

weui-cell__bd：列表的主体

weui-cell__ft：列表的尾部

weui-cell_swiped：列表组件危险

weui-cell_access：跳转列表

其实这列表组将用起来还是很方便的，只要把架构了解清楚，在看情况选择列表类型来使用起来还是很舒服的。

这俩天用WeUI写了个移动端的学生登入注册页面，等我这俩天整理一下在发上来分享给同学们。

——来自胡小哥WeUI自学笔记（持续更新中...）