持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情

最近项目中需要实现一个6个输入框，只能输入数字的需求，输入之后，自动聚焦到下一个输入框，我们一起看看吧~

邀请码输入框

如图所示

只能输入数字 onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"

html代码

<form bindsubmit="formSubmit">
    <view class="fs16 m-b-30 title">请输入6位数字的课堂邀请码</view>
    <view class='content'>
        <block wx:for="{{Length}}" wx:key="item">
            <input class='iptbox' value="{{Value.length >= index + 1 ? Value[index] : ''}}" disabled password='{{ispassword}}' catchtap='Tap' onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"></input>
        </block>
    </view>
    <input name="password" password="{{true}}" class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="Focus"></input>
    <view class="p-f">
        <button class="wx-btn" formType="submit">下一步</button>
    </view>
</form>

js代码

 data: {
    Length: 6, 
    isFocus: true, // 聚焦 
    Value: "", // 输入的内容 
    ispassword: false, // 是否密文显示 true为密文， false为明文。 
},
    

输入框聚焦

Focus(e) {
    var that = this;
    console.log(e.detail.value);
    var inputValue = e.detail.value;
    that.setData({
        Value: inputValue,
    })
},
Tap() {
    var that = this;
    that.setData({
        isFocus: true,
    })
},
// 提交
formSubmit(e) {
    console.log(e.detail.value.password);
},

css样式

.title {
    padding: 20rpx;
}

.content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 15rpx;
}

.iptbox {
    width: 100rpx;
    height: 100rpx;
    border: 1rpx solid #ddd;
    border-radius: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.ipt {
    width: 0;
    height: 0;
}

.btn-area {
    width: 80%;
    background-color: var(--main-font-color);
    color: white;
    border-radius: 50rpx;
}

wxCharts

wxCharts会出现所有值都是0，y轴展示负值的情况，不符合需求，设置了min：0又没有作用

解决办法：同时设置名、min:0,max:100000可生效

滚动区域没有开启惯性滚动

惯性滚动会使滚动比较顺畅，在安卓下默认有惯性滚动

在 iOS 下需要额外设置 -webkit-overflow-scrolling: touch 的样式

图片预览

小程序中图片预览可以直接用vant的upload功能，设置show-upload="{{false}}"属性

<van-uploader file-list="{{ currentQue.picList }}" bind:after-read="afterRead"
      deletable="{{false}}" show-upload="{{false}}" />

注意点:如果后台返回的图片地址是一段没有后缀的地址，需要设置 isImage属性，否则展示不出来

currentQue.picList.forEach(item=>{
    item.isImage = true;
})

同样，如果是视频的时候，需要设置isVideo属性为true

currentQue.picList.forEach(item=>{
    item.isVideo = true;
})