网站做留言板,医疗器械公司简介,河南一体化平台官网,爱站小工具圣经先看下微信当中的自带的数字键盘 这种实现方式比较简单#xff0c;可以直接用inline-block标签#xff0c;设置每行平均宽度#xff0c;比如一行要放4个按钮#xff0c;可以那么宽度就可以设为25%#xff0c;同时要注意设置css样式为box-sizing: border-box,这样在设置边框… 先看下微信当中的自带的数字键盘 这种实现方式比较简单可以直接用inline-block标签设置每行平均宽度比如一行要放4个按钮可以那么宽度就可以设为25%同时要注意设置css样式为box-sizing: border-box,这样在设置边框 的时候就不会超出定义的固定宽度。 接下来看下另一种复杂点的键盘 初看貌似可以像在上面方案一样只是键盘文字再套一层标签然后给外部标签增加padding。但是由于手机宽度不是固定的所以无法计算出通用padding使得按钮元素在每一行精确平分空间显示。 这时候flex布局的justify-contentspace-between属性就派上用场了。 从上图可以看到该属性可以使一行当中的左右两边的元素靠边中间元素会自动分配等距间隔。 所以用于存放键盘数字的数组就可以写成这样 const textArr [[A, B, C, D, E,F],[G, H, I, J, K,],[L, M, N, O, P, Q]...] 这时候会遇到最后一行不是填满一整行的情况那么可以将剩下的元素设置为空[挂,,,,],同时在循环的时候判断元素是否为空为空的话加上css样式opacity: 0不能设置为display: none); 最后 1 为提高性能注意采用事件委托方式绑定点击事件 2 按钮点击的时候要有相应反馈可以设置元素的为active的时候改变背景色。水墨散开效果是现在安卓上比较流行的点击反馈的效果下面这段代码是实现该效果的使用的时候给按钮添加ripple类名就可以了 1 .ripple {2 position: relative;3 //隐藏溢出的径向渐变背景4 // overflow: hidden;5 }6 7 .ripple:after {8 content: ;9 display: block;
10 position: absolute;
11 width: 100%;
12 height: 100%;
13 top: 0;
14 left: 0;
15 pointer-events: none;
16 //设置径向渐变
17 background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
18 background-repeat: no-repeat;
19 background-position: 50%;
20 transform: scale(10, 10);
21 opacity: 0;
22 transition: transform .3s, opacity .3s;
23 }
24
25 .ripple:active:after {
26 transform: scale(0, 0);
27 opacity: .3;
28 //设置初始状态
29 transition: 0s;
30 } 转载于:https://www.cnblogs.com/pjl43/p/9788469.html
