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

form

大概要实现的效果如下图(具体demo可见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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

一个有趣的鼠标移上去的动画-整理

3576
来自专栏mySoul

SVG可伸缩的矢量图形

SVG是对画该图形时的一些路径,做出精准的,必要的与分辨率无关的一种描述。即对矢量图的描述

963
来自专栏数据小魔方

裁图、抠图、换背景,PPT也可以

今天跟大家聊一聊PPT的基本图片处理功能! ▽ 每次做PPT的时候 总想弄几个感觉还不错的图片 插入PPT里来装装bigger 可是能找到的图片 不是背景不搭 ...

34910
来自专栏前端杂货铺

隐藏的几种实现

 页面布局上隐藏,但是对屏幕阅读器可见的几种方式:      1, .h{position:relative; left:-900em;top:-900em;...

34212
来自专栏刘望舒

探索 Android Design Support Library v28 新增内容

1492
来自专栏AndroidTv

【Android】5.x炫酷标题栏动画使用理解

Android5.0+推出的新控件感觉特别酷,最近想模仿大神做个看图App出来,所以先把这些新控件用熟悉了。 新控件的介绍、使用等等网上相应的文章已经特别多了...

4116
来自专栏一“技”之长

AppleWatch开发入门二——界面布局 原

        在iphone开发中,最基本的布局方式是通过frame,将控件的位置和大小固定在屏幕上,后来,由于手机屏幕的尺寸有了略微变化,有了autores...

842
来自专栏calmound

HTML

注释<!--这里是注释--> 页面内容<body>展示的页面内容</body> 段落 <p></p> 标题<hx></hx>     <body>     <h...

3127
来自专栏青玉伏案

iOS开发之虾米音乐频道选择切换效果分析与实现

今天博客的内容比较简单,就是看一下虾米音乐首页中频道选择的一个动画效果的实现。之前用mask写过另外一种Tab切换的一种效果,网易云音乐里边的一种Tab切换效果...

1403
来自专栏编程心路

Bootstrap学习文档(二)

Bootstrap 中把一些标签的样式重置了,也即是为一些标签设置了带有 Bootstrap 风格的样式,如 h 标签,p 标签等等,这其中包含了 HTML5 ...

1305

扫码关注云+社区