1.需求目标的确认
本次需求方想要实现一个金额输入的输入框样式,如下图。
其中这个icon是输入金额时显示,点击后金额消失,‘万’与‘元’字是固定位置
看到这样的需求图的第一反应肯定是笑呵呵,哪怕初学编程的人员都能三下五除二的做出来。
于是我们便有一下的实现解决思路。
2.需求实现方式构思
按照交互提供的UI图大致将此模块分成了2部分,上面部分的文案区域,下面部分的输入框区域。
简单实现代码如下。
以下是js代码:
<View className={style.singlePart}>
<View className={styles.upperPart}>
<View>申请金额</View>
<View>交易规则</View>
</View>
<View className={styles.downPart}>
<Input
type='number'
value={inputVal}
placeholder={`请输入金额`}
className={styles.inputStyle}
/>
<Image src={closeIcon} className={styles.closeIcon}/>
<Text className={styles.unitTH}>万</Text>
<Text className={styles.unit}>元</Text>
</View>
</View>
以下是css代码
.singlePart{
background: #fff;
display: flex;
flex-direction: column;
}
.upPart{
display: flex;
justify-content: space-between;
padding-bottom: 13px;
}
.downPart{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.inputStyle{
font-family: 'PingFangSC-Regular';
font-size: 14px;
color: #999999;
font-weight: 400;
padding: 18px 0 14px 0px;
}
.closeIcon{
width: 18px;
height: 18px;
right: 8px;
}
.unitTH{
position: absolute;
bottom: 14px;
right: 2px;
font-family: 'PingFangSC-Regular';
font-size: 24px;
color: #e03136;
}
.unit{
position: absolute;
bottom: 3px;
font-family: 'PingFangSC-Regular';
font-size: 14px;
color: #e03136;
}
交互里的‘万’和‘元’我们自然而然的就想到用绝对定位来实现。运行以上代码我们就可以很容易的实现上图的交互。虽然只是静态的实现了,但是没有考虑到交互因素。
(’交易规则’ 后面需求方要求删去。)
当页面滑动的时候,‘万元户’跑没了。
于是优化一下,改成相对定位。
.unitTH{
position: relative;
bottom: 14px;
right: 2px;
font-family: 'PingFangSC-Regular';
font-size: 24px;
color: #e03136;
}
.unit{
position: relative;
bottom: 3px;
font-family: 'PingFangSC-Regular';
font-size: 14px;
color: #e03136;
}
我们成功留住了‘万元户’
但是本项目是在移动端设备,考虑到不同机型的屏幕问题,‘万元’两个字的相对定位距离值不一定适用到所有机型,显然用相对定位也不是一个很好的实现方法。
3.最终解决方案
最终我们修改样式代码如下:
.unitTH{
display: 'block';
font-family: 'PingFangSC-Regular';
font-size: 24px;
color: #f77e82;
text-align: right;
font-weight: 400;
}
.unit{
display: 'block';
font-family: 'PingFangSC-Regular';
font-size: 14px;
color: #e03136;
text-align: right;
font-weight: 400;
}
这样的方案便可以让输入框适用所有的移动设备,不用考虑距离设置问题了!
原文链接:https://juejin.cn/post/7356138322368151590 作者:糖潮小漩风