移动端重构实战系列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 条评论
登录 后参与评论

相关文章

来自专栏iOS技术

iOS 触摸事件响应链

本文讨论iOS事件中的触摸事件及其响应链,至于加速计事件和远程控制事件不在本文的讨论范畴。

3037
来自专栏JetpropelledSnake

Vue学习笔记之Vue组件

vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。

571
来自专栏GreenLeaves

JavaScript图片库

将图片放到网上的方法有很多,你可以简单地把所有的图片都放到网页上。但是,如果你打算发布的图片过多,这个页面很快会变的过于庞大,而且加上这些图片后用户要下载的的数...

1786
来自专栏小程序之家

如何在小程序中实现音频播放

在如何使用小程序媒体组件这篇文章中,我们介绍了小程序媒体组件的使用,但是对音频组件部分讲的不够详细,本文将对音频部分做些补充。

380
来自专栏前端杂货铺

样式化加载失败的图片

本片文章翻译自 Styling Broken Images 翻译过程中可能会在原意不变的基础上有些细微改动,望读者见谅 加载失败的图片是比较丑陋的,比如 但是我...

3247
来自专栏WebHub

可视化讲解 DOM 的构建过程

最近在看 Secrets of the JavaScript Ninja, 书中第二章讲到 DOM 的构建流程.

492
来自专栏向治洪

React Native之ViewPagerAndroid 组件

概述 今天我们来讲解一下关于 ViewPager 的使用,它是一个允许子视图左右滚动翻页的容器。我们知道在Android开发中系统有ViewPager这个组件,...

1808
来自专栏IMWeb前端团队

导航菜单优化制作

以前制作导航菜单,总要加许多id在HTML中,js代码也要将id挨个加上去,今日终于习得破解之法,不在用以前那种笨拙的方法了。 ? 以下是HTML代码: <bo...

1937
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(5)---常用的单元格类型(下)

在上一篇,我们介绍了常用了文本类型单元格。除了文本型单元格外,Spread还支持如下13种图形单元格类型:组合框单元格、按钮单元格、复选框单元格、超链接单元格、...

2106
来自专栏CRPER折腾记

Angular 2 + 折腾记 :(10) 初步了解动画,以及一步一步写个动画效果

ng2.x动画相关的api是并入@angular/core这个核心模块的,在angular4之后开始独立

602

扫码关注云+社区