前言
最近公司开发一款小程序，也是本人第一次开发线上小程序 经验不足 多多指教
在外卖取货页面UI设计如下图是依次连接6个数字输入框
可依次动态输入也可以依次动态删除
效果展示
遇到问题
之前用的Vant Weapp UI框架 但是这个框架的van-input组件实在难用
更改这个组件的属性 需要穿透才可以修改！
后面我做的优化，就把van-input换成了input输入框
逻辑方便也做了修改
逻辑思路
实现思路比较简单 使用了6个input输入框 通过fous属性来控制依次输入往后移动
或依次删除向前移动的动态效果
如效果图展示 在光标所在的input框时 已输入的和未输入的input框是不可以获取焦点的
不然ui效果和光标就会错乱 效果看起来很low!
代码展示
template代码
<view class="input-content">
<input class="field-custom" type="number" maxlength="1"
:style="firstFocus ? 'border: 2rpx solid #2681FE;
box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
@focus='focus' :focus="firstFocus"
@input="inputChange($event, SELECT_TYPE.A)" input-align="center"
:disabled="!firstFocus" />
<input class="field-custom" type="number" maxlength="1"
:style="secondFocus ? 'border: 2rpx solid #2681FE;
box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
:focus="secondFocus" @input='inputChange($event, SELECT_TYPE.B)'
input-align="center"
:disabled="!secondFocus" />
<input class="field-custom" type="number" maxlength="1"
:style="thirdFocus ? 'border: 2rpx solid #2681FE;
box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
:focus="thirdFocus" @input='inputChange($event, SELECT_TYPE.C)'
input-align="center"
:disabled="!thirdFocus" />
<input class="field-custom" type="number" maxlength="1"
:style="fourFocus ? 'border: 2rpx solid #2681FE;
box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
:focus="fourFocus" @input='inputChange($event, SELECT_TYPE.D)'
input-align="center"
:disabled="!fourFocus" />
<input class="field-custom" type="number" maxlength="1"
:style="fiveFocus ? 'border: 2rpx solid #2681FE;
box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
:focus="fiveFocus" @input='inputChange($event, SELECT_TYPE.E)'
input-align="center"
:disabled="!fiveFocus" />
<input class="field-custom" type="number" maxlength="1"
:style="sixFocus ? 'border: 2rpx solid #2681FE;
box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
:focus="sixFocus" @input='inputChange($event, SELECT_TYPE.F)'
input-align="center" :disabled="!sixFocus" />
</view>
script 逻辑实现
这里需要注意一点：输入所有码或数字后是直接调用接口 获取订单信息的
这个时候我们需要拿到失败的code 加一层判断
如果失败了 需要把光标重置到末尾 已方便用户重新输入 也许是他输错了呢？
js代码逻辑清晰 简单 有问题可以留言交流
//枚举类型
enum SELECT_TYPE {
A = 'a',
B = 'b',
C = 'c',
D = 'd',
E = 'e',
F = 'f'
}
/**
* 输入框及光标
*/
const firstFocus = ref(true)
const secondFocus = ref(false)
const thirdFocus = ref(false)
const fourFocus = ref(false)
const fiveFocus = ref(false)
const sixFocus = ref(false)
//记录输入的值
const num1 = ref<string>('')
const num2 = ref<string>('')
const num3 = ref<string>('')
const num4 = ref<string>('')
const num5 = ref<string>('')
const num6 = ref<string>('')
function focus() {
firstFocus.value = true;
}
/**
* 监听输入框值
* @param e 输入变化
* @param type 类型区分
*/
function inputChange(e: any, type: string) {
console.log('input >>>', e);
//初始化所有光标
initialization();
switch (type) {
case 'a':
if (e.detail.value != '' && e.detail.keyCode != 8) {
secondFocus.value = true;
}else{
firstFocus.value = true
}
num1.value = e.detail.value
break;
case 'b':
if (e.detail.value != '' && e.detail.keyCode != 8) {
thirdFocus.value = true;
}else{
firstFocus.value = true
}
num2.value = e.detail.value
break;
case 'c':
if (e.detail.value != '' && e.detail.keyCode != 8) {
fourFocus.value = true;
}else{
secondFocus.value = true
}
num3.value = e.detail.value
break;
case 'd':
if (e.detail.value != '' && e.detail.keyCode != 8) {
fiveFocus.value = true;
} else {
thirdFocus.value = true
}
num4.value = e.detail.value
break;
case 'e':
if (e.detail.value != '' && e.detail.keyCode != 8) {
sixFocus.value = true;
} else {
fourFocus.value = true
}
num5.value = e.detail.value
break;
case 'f':
if (e.detail.value != '' && e.detail.keycode != 8) {
initialization();
} else {
fiveFocus.value = true
}
num6.value = e.detail.value
break;
}
const outNum = num1.value + num2.value + num3.value
+ num4.value + num5.value + num6.value
console.log('美团取货码为：', outNum);
if (outNum != '' && outNum.trim().length == 6) {
getPickedupList(storeId.value, outNum)
}
//如果输入框都有内容 光标不用移动
if (num1.value != '' && num2.value != '' && num3.value != ''
&& num4.value != '' && num5.value != '' && num6.value != '') {
initialization();
}
}
// 初始化所有焦点变量
function initialization() {
firstFocus.value = false;
secondFocus.value = false;
thirdFocus.value = false;
fourFocus.value = false;
fiveFocus.value = false;
sixFocus.value = false;
}
/**
* 初始化
*/
onMounted(() => {
initialization()
focus()
})
总结
在第一版的时候 产品验收这个问题我自己也意识到了 做的不够完美
所以在验收完 我一直都在思考这个问题 想办法完善它 所有才有了今天的结果~
有时候，我们就是需要这样一种精神，才可以在行业中走的更远
继续努力，加油~
