这个line list的名字是我自己起的(大概的意思是单行列表),要实现的东西为sheralline list,对应的scss组件为_line-list.scss,下图为line-list的一个缩影:

这个UI应该是每个移动端网页都必备的,而且使用场景也是非常的丰富,所以这里我们采用一步步循序渐进的方式去重构。

先说下整个过程中要解决的问题:

  • retina 1px
  • 分割线缩进
  • 整行点击
  • 单页应用或跳转页面
  • 如何方便扩展

最简模式

html结构

.line-list>.line-item

结构方面,标签可以是ul.line-list>.line-item或者div.line-list>a.line-item,前者用于单页应用,后者用于链接跳转。

关键scss代码

.line-item {
@extend %bar-line;
}
.line-list {
background: #fff;
+ .line-list {
margin-top: 10px;
}
}

由于这种line item的样式使用场景较多,所以我们封装了一个%bar-line,定义在sandal_mixin.scss文件中(下面如无特殊说明,mixin和%均在该文件定义),如下:

// bar line
%bar-line {
line-height: $barHeight - 10px;
padding: 5px 10px;
position: relative;
display: block;
overflow: hidden;
@if $activeStateSwitch{ //是否开启:active样式
&:active,
&:hover {
background-color: darken($colorF, 3%);
}
}
&:not(:irst-of-type)::before { // 使用伪元素生成retina 1px
content: "";
@include retina-one-px-border;
}
}

下面解读下上面的SCSS代码:

  • retina 1px我们在sandal里面封装了个mixinretina-one-px-border($direction: top, $color: $colorBorder),直接传入相应参数调用即可。
  • 1px挂在除第一个元素之外的伪元素before上,而第一个最上面和最后一个最下面的1px将会在父元素上实现,那样中间line-item之间的1px就很容易扩展实现缩进。
  • 每个line item的高度为44px(ios 的标准高度为44px),实现方法为line-height + padding,为什么不是直接line-height:44px,这就涉及到我们下面更多的扩展形态了。

右箭头跳转模式

保持HTML结构不变,追加class实现所需的功能:

  • item之间的1px缩进,最开始和最末位的不缩进
  • 右侧箭头
.line-list--indent {
@extend %border-tb; // 添加最上和最下的1px,形成封闭
.line-item::before {
left: 10px; // 缩进10px
}
}
.line-list--after-v { // 右箭头通过after生成
.line-item {
padding-right: 30px;
@extend %item-v-right;
}
}

这里缩进用的伪元素before1px left定位来实现的,看到过有些方法是设置itemborder-bottom,然后设置itemmargin-left: 10px,这种实现方法是错误的,因为点击的不是整行了(缺了margin-left10px),当然也可以内嵌一个inner元素设置inner元素的margin-left,或空元素定位等

同样考虑到比较常用,在sandal中封装了两个%,分别为%border-tb%item-v-right,具体代码为:

// border top & bottom
%border-tb {
position: relative;
&::before {
content: "";
@include retina-one-px-border(top);
z-index:; // 第一个元素点击的时候防止active背景色遮盖了1px
}
&::after {
content: "";
@include retina-one-px-border(bottom);
}
} // item arrow, 右侧箭头跳转指向
%item-v-right {
&::after {
content: "";
@include v-arrow;
color: $colorC;
position: absolute;
right: 15px;
top: 50%;
margin-top: -1px;
transform: rotate(45deg) translate(0, -50%);
box-sizing: border-box;
}
}

选择模式

选择模式分为单选和多选,单选同样可以保持结构不变,通过after元素生成选中的对钩;而多选则可以添加i.icon-checbox元素。对钩和icon checkbox都是CSS绘制,使用currentColoritem选中时直接改变color即可,具体代码如下:

// 单选
.line-list--select {
.line-item {
padding-right: 30px;
&.active {
color: $primary; // 选中改变颜色
&::after { // 伪元素生成对钩
content: "";
display: block;
width: 14px;
height: 8px;
border-bottom: 2px solid currentColor;
border-left: 2px solid currentColor;
transform: rotate(-52deg) translate(0, -50%);
box-sizing: border-box;
position: absolute;
top: 50%;
right: 8px;
margin-top: -4px;
}
}
}
} // 多选
.line-list--multi-select {
.active{
color: $primary;
.icon-checkbox{
color: $primary;
}
}
}

复杂模式

这里我们将采用flex,一行大概分为三栏:图标icon(固定宽度),中间内容(剩余宽度),右边操作或提示(switch,提示文字或数字,右箭头)。如果你要兼容的手机不支持flex,那也没关系,这个结构也足够你使用绝对定位或float布局了,完全不需要再更改结构。

.line-list--flex {
.line-item {
display: flex;
align-items: center;
padding-right:; .item-icon,
.item-img,
.icon-switch,
.remind-num,
.item-append{
margin-right: 10px;
}
.item-bd { // 中间内容
flex:;
margin-right: 10px;
width: 1%;
}
.item-append{
color: $color9;
}
.icon-v-right {
width: 30px;
height: 30px;
color: $colorC;
margin-left: -10px;
}
.remind-num {
position: static;
line-height: 1.5;
}
}
}

打造好了line-list,就可以广泛应用于其他地方了,如actionsheetfilterpopover等各种地方。

出处:http://www.w3cplus.com/mobile/sandal-parts-2.html


移动端重构实战系列2——line list的更多相关文章

  1. Spark入门实战系列--5.Hive(上)--Hive介绍及部署

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .Hive介绍 1.1 Hive介绍 月开源的一个数据仓库框架,提供了类似于SQL语法的HQ ...

  2. Spark入门实战系列--7.Spark Streaming(上)--实时流计算Spark Streaming原理介绍

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .Spark Streaming简介 1.1 概述 Spark Streaming 是Spa ...

  3. Spark入门实战系列--9.Spark图计算GraphX介绍及实例

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .GraphX介绍 1.1 GraphX应用背景 Spark GraphX是一个分布式图处理 ...

  4. GitHub实战系列~1.环境部署+创建第一个文件 2015-12-9

    GitHub实战系列汇总:http://www.cnblogs.com/dunitian/p/5038719.html ———————————————————————————————————————— ...

  5. GitHub实战系列~3.提交github的时候过滤某些文件 2015-12-10

    GitHub实战系列汇总:http://www.cnblogs.com/dunitian/p/5038719.html ———————————————————————————————————————— ...

  6. Spark入门实战系列--3.Spark编程模型(上)--编程模型及SparkShell实战

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .Spark编程模型 1.1 术语定义 l应用程序(Application): 基于Spar ...

  7. Spark入门实战系列--3.Spark编程模型(下)--IDEA搭建及实战

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 . 安装IntelliJ IDEA IDEA 全称 IntelliJ IDEA,是java语 ...

  8. Spark入门实战系列--4.Spark运行架构

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 1. Spark运行架构 1.1 术语定义 lApplication:Spark Appli ...

  9. Spark入门实战系列--7.Spark Streaming(下)--实时流计算Spark Streaming实战

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .实例演示 1.1 流数据模拟器 1.1.1 流数据说明 在实例演示中模拟实际情况,需要源源 ...

随机推荐

  1. 学习笔记:MySQL列属性

    列属性 a)         null|not null 缺省值是null,也就是允许为空,如果是not null而又没有给该字段赋值的话,系统会首先查询该字段有没有默认值 b)         de ...

  2. 浅谈 Scrapy 爬虫(二)

    越写越像官方文档的翻译,偏离了初衷.写一些官方文档里没有的内容吧.   在不限制宽带的环境下,根据页面的大小, Scrapy 一秒能爬取40-70个页面,一天在400万到600万页面.也就是说 Scr ...

  3. 【日常小记】统计后缀名为.cc、.c、.h的文件数【转】

    转自:http://www.cnblogs.com/skynet/archive/2011/03/29/1998970.html 在项目开发时,有时候想知道源码文件中有多少后缀名为.cc..c..h的 ...

  4. Centos7上搭建OpenvpnServer——pritunl

    首先做基本的安装,如下(国内下载pritunl的rpm包可能会有点慢,多试几次) # vi /etc/yum.repos.d/mongodb-org-3.2.repo [mongodb-org-3.2 ...

  5. JavaScriptCore 使用

    JavaScriptCore JavaScriptCore是webkit的一个重要组成部分,主要是对JS进行解析和提供执行环境.代码是开源的,可以下下来看看(源码).iOS7后苹果在iPhone平台推 ...

  6. maven 打war包tomcat服务器乱码问题

    今天用maven3的命令打war包,命令是mvn clean package -Dmaven.test.skip=true,打包后放在tomcat跑起来后发现tomcat的日志出现乱码. 后来在pom ...

  7. hybird混合式开发搭建

    1.xml <?xml version="1.0" encoding="utf-8"?> <WebView xmlns:android=&qu ...

  8. Eclipse解决Ctrl+c很卡的方法

    问题如下 : 每当在eclipse中开发java项目打开jsp页面编辑的时候,按了ctrl+c就会卡死几秒的状态,一天经常这样会让人非常的烦躁. 解决方法如下: Eclipse -- Windows- ...

  9. IE8 jquery解析xml的兼容问题

    正常情况下可以这么写: jQuery(node).find(xpath.replace("//", ""))[0]; 但是在IE8下得到的是undefined应 ...

  10. Web App适配不同屏幕的几点建议

    安卓设备在屏幕尺寸和像素密度上差别很大,因此在使用WebView加载网页时就需要考虑到这种差别,对我们的网页做出精心的设计以在不同的屏幕上都能得到合适的展现.通常情况下,我们需要考虑到两个因素:1.视 ...