微信小程序好看的输入信息界面

简介

输入个人信息界面，录入个人信息等都可以使用到这个界面：
1、输入信息的布局界面
2、选择大陆还是港澳台的手机号码
3、输入手机号码，
4、获取验证码的60S倒计时，60s倒数结束后恢复“获取验证码”
5、释放获取验证码倒数线程的资源
效果图如下：

这里倒计时，都是封装得非常好。希望大家喜欢。

代码

.
.
.
.
.
.
wxml

<view class='bg'></view><view class='horizon firstrow'><image class='left icon' src='../images/icon-name.png'></image><input class='input' bindinput='nameInput' placeholder='请输入您的姓名'></input>
</view><view class='line'></view><view class='horizon secondrow'><image class='left icon' src='../images/icon-credno.png'></image><picker bindchange="bindPickerChange" value="{{cardNoArrayIndex}}" range="{{cardNoArray}}"><view class="picker">{{cardNoArray[cardNoArrayIndex]}}</view></picker><view class='arrow'></view><input class='input' bindinput='cardInput' placeholder='请输入您的证件号'></input>
</view><view class='line'></view><view class='horizon firstrow'><image class='left icon' src='../images/icon-mobile.png'></image><input class='input' bindinput='teleInput' placeholder='请输入您的手机号'></input>
</view><view class='line'></view><view class='horizon firstrow'><image class='left icon' src='../images/icon-pic-code.png'></image><input class='input' bindinput='picValidCodeInput' placeholder='请输入图形验证码'></input><image class='icon-ValidCode' src='{{picValidCodeUrl}}' bindtap='tapPicValidCode'></image>
</view><view class='line'></view><view class='horizon firstrow'><image class='left icon' src='../images/icon-sms-code.png'></image><input class='input' bindinput='vertifyCodeInput' placeholder='请输入验证码'></input><button class='button' disabled="{{disabled}}" bindtap='tapSendVertifyCode'>{{time}}</button>
</view><view class='bg'></view><button class='sureBtn' type='primary' bindtap='sureTap'>确定</button><view class='vertical'><text class='top left'>说明</text><text class='top left right declare'>1.请输入真实准确的“姓名”、“证件号”、“手机号”；\n2.“证件号”目前支持：大陆身份证、港澳台身份证；</text>
</view>

.
.
.
.
wxss

.bg{width: 100%;height: 30rpx;background-color: #edecf2;
}
.horizon{display: flex;flex-direction: row;
}
.vertical{display: flex;flex-direction: column;
}
.firstrow{width: 100%;height: 100rpx;align-items: center;
}
.secondrow{width: 100%;height: 120rpx;align-items: center;
}
.left{margin-left: 40rpx;
}
.right{margin-right: 20rpx;
}
.top{margin-top: 30rpx;
}
.icon{width: 40rpx;height: 40rpx;
}
.input{margin-left: 30rpx;font-size: 32rpx;color: gray;flex-grow: 1;
}
.line{width: 100%;height: 3rpx;background-color: #edecf2;
}
.picker{margin-left: 30rpx;width: 100rpx;height: 100%;font-size: 32rpx;color: #222;
}
.arrow{width: 10rpx;height: 10rpx;border: 4rpx solid #333;border-bottom: none;border-left: none;transform: rotate(135deg);
}.icon-ValidCode{width: 180rpx;height: 80rpx;margin-right: 20rpx; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;
}
.declare{font-size: 30rpx;color: #666666;
}
/* 获取验证码 倒计时 按钮 如果设置宽高不生效的话，删除app.js里面的 "style": "v2",*/.button{width: 200rpx;height: 65rpx;color: #449f45;border: 3rpx solid #449f45;border-radius: 80rpx;font-size: 24rpx;margin-right: 20rpx; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;text-align: center;
}
/* 确定按钮 */
.sureBtn{margin-top: 70rpx;margin-left: 40rpx;margin-right: 40rpx;
}

项目的下载地址为：
https://download.csdn.net/download/wy313622821/12390800

微信小程序好看的输入信息界面——发送验证码倒计时相关推荐

微信小程序好看的个人中心界面之水波纹
正如下面所示,在基本信息卡片下方会一直有水波纹在流动,很适合放在个人中心界面,效果很好实现的基本原理:用一张水波纹的gif图片,设置为和背景图同样的色调,将水波纹设置为绝对定位,固定在下方,并且显示 ...
uniApp和微信小程序好看的我的页面（有源码）
uniApp和微信小程序好看的我的页面(有源码) 1.先睹为快未登录状态以登录 uniapp源码 <template><view class="content" ...
微信小程序调取云函数信息推送失败response out of time limit or subscription is canceled hint的具体解决方法
微信小程序调云函数信息推送失败,提示errcode":45015,"errmsg":"response out of time limit or subsc ...
微信小程序获取input输入的值
微信小程序获取input输入的值 view <view><text>姓名:</text><input type='text' name="user ...
微信小程序制作——获取用户信息
微信小程序制作--获取用户信息 1.获取用户信息方式一 wxml <view bindtap="getUserName">获取当前用户名</view> j ...
微信小程序模仿华为音乐列表界面
微信小程序模仿华为音乐列表界面 index.js var app=getApp(); var listDatas = require("../../data/data_list.js&q ...
微信小程序的语音输入功能开发：微信同声传译插件
微信小程序的语音输入,语音转文字功能在很多场景要使用到比如搜索框,搜索关键字的时候用语音输入比用文字方便多了再比如再天下网吧小程序里发帖,发布回复时,用语音输入比输入文字也方便不少那么如何实现语 ...
微信小程序判断手机机型信息及dpr
微信小程序判断手机机型信息及dpr=2.3 出现这个原因是因为手机dpr不同,导致在显示二维码时出现位置偏移.首先能想到的就是获取设备信息,根据不同机型而解决问题. 1.wxml 开控制位置间距var ...
微信小程序获取住户地区信息
微信小程序获取住户地区信息微信小程序获取住户地区信息微信小程序获取住户地区信息 1.现在app.js里面配置如下 { //向用户申请获取授权"permission": {&qu ...

微信小程序好看的输入信息界面——发送验证码倒计时

微信小程序好看的输入信息界面

简介

代码

微信小程序好看的输入信息界面——发送验证码倒计时相关推荐

最新文章

热门文章