转载

移动端重构实战系列5——form元素

”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对 sandal 及 sheral UI 的一次全方位剖析,首发在imweb和 w3cplus 两大站点及“前端Talk”微信公众号,其余所有标注或没有标注来源的均为转载。“

——imweb 结一

form

大概要实现的效果如下图(具体demo可见 sheral form ):

移动端重构实战系列5——form元素

粗略一看,跟line list差不多,好像可以直接套用,但是深究起来还是有那么些不同的,大概有以下几点用户体验差别:

  • 输入框可点击范围
  • 右边的箭头可点击范围

line list设计95%都是整行点击,所以不管你点哪,都是触发整行的点击事件,右边的箭头就是个指引而已,所以伪元素生成是没有问题的;而form就不一样了,右边箭头是真的要挂载事件的,所以除了直接使用元素外,点击范围一定要设计合理,总不能箭头多大就多大,那操作起来就不方便了,同理input框我们也需要设计成整行的高度,方便点击输入。以电话为例,既可以手动在input框输入,也可以点击右边的箭头去通讯录选择,所以单纯的复制line list过来是行不通的,下面从html及scss代码简单分析下。

从html结构上,大体分为三列,分别为label,表单元素及右边附加部分

.form-item     label.item-label     .item-field             input:text.f-text <!-- 表单元素 -->             p.field-value.placehold <!-- 选择值或默认值或选择说明 -->     i.icon-v-right <!-- 右边部分 -->

而scss主要是flex布局,设置中间输入元素部分为 flex:1;

.form-item{     display: flex; // flex布局,子元素垂直居中     align-items: center;     position: relative;     line-height: $barHeight;     overflow: hidden;      &:not(:first-of-type)::before { // 1px 分割线         content: "";         @include retina-one-px-border;     }      .item-field{ // 剩余宽度         flex: 1;         width: 1%;     }     .icon-v-right{ // 右侧箭头         display: block;         width: 30px;         height: $barHeight;         color: #ccc;     } }

错误处理

主要提供了四个icon,分别为alert、info、question、ok,demo可在 sheral icon 查看,样式定义在 sandal/ext/_icons.scss 中,代码如下:

.icon-alert{     color: $red;     &::after{         content: "!";     } } .icon-info{     color: $blue;     &::after{         content: "i";     } } .icon-question{     color: $blue;     &::after{         content: "?";     } } .icon-ok{     color: $green;     &::after{         content: "";         position: absolute;         top: 50%;         left: 50%;         width: 5px;         height: 2px;         border-bottom: 1px solid currentColor;         border-left: 1px solid currentColor;         transform: translate(-50%, -50%) rotate(-52deg) scale(1.5);         margin-top: -1px;     } }

其中alert、info、question三个icon里面的图标分别为 !i? ,通过伪元素after设置content,而ok的则通过伪元素after绘制,为了达到和前面三个一样的粗细,使用了transform的scale

search

demo见 sheral search

主要说下第二个搜索框。它其实是个假的搜索输入框,点击跳转到真的搜索,所以居中的icon和文字其实并不是input的内容。

range

demo见 sheral range

直接使用了 input:range ,所以样式方面主要是重置range的shadow dom样式,样式比较多,可直接参阅 _range.scss 或自行搜索相关文章。

对于某些低端浏览器兼容问题,包裹了一层 .range-wrap ,通过包裹的伪元素生成range的trace

原文  http://imweb.io/topic/578307abba724c663b835279
正文到此结束
Loading...