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

作者：结一 日期：2016-07-12 点击：1051
移动端重构系列
sandal
sheral
mobile

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

——imweb 结一

form

大概要实现的效果如下图（具体demo可见sheral form）：

Sheral 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。

结一

常用昵称“结一”。资深前端工程师，Drupal Themer，拥有丰富的前端实战经验。目前和大漠一起管理 W3CPlus站点，为 CSS3 的推广贡献自己的力量，是广大的 Drupal 爱好者之一。擅长于布局架构、浏览器兼容，CSS3研究。请关注我：新浪微博。

如需转载，烦请注明出处：http://www.w3cplus.com/mobile/sandal-parts-5.html

返回顶部