标签：false vant 手把手 center disabled 输入框 微信 true setData
效果图
源代码
.josn
弹出框用了vant小程序的ui，需要下载。也可以不用，抽取关键代码即可。
vant-weapp：https://vant-contrib.gitee.io/vant-weapp/#/quickstart
"usingComponents": {
"van-popup": "@vant/weapp/popup/index"
},
wxml
<van-cell title="展示弹出层" is-link bind:click="showPopup" />
<van-popup show="{{ show }}" closeable position="bottom" custom-style="height: 60%" bind:close="onClose">
<view class="Toptitle">请输入密码</view>
<!-- 以下为输入密码关键代码 -->
<form bindsubmit="formSubmit">
<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'></input>
</block>
</view>
<input name="password" password="{{true}}" class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="Focus"></input>
<view>
<button class="btn-area" type='primary' disabled='{{disabled}}' formType="submit">下一步</button>
</view>
</form>
</van-popup>
js
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
Length: 6, //输入框个数
isFocus: false, //聚焦 唤起键盘
Value: "", //输入的密码内容
ispassword: false, //是否密文显示 true为密文， false为明文。
disabled: true,//下一步按钮可否可点击
show: false, //弹出框
},
Focus(e) {
var that = this;
console.log(e.detail.value);
var inputValue = e.detail.value;
var ilen = inputValue.length;
if (ilen == 6) {
that.setData({
disabled: false,
})
} else {
that.setData({
disabled: true,
})
}
that.setData({
Value: inputValue,
})
},
Tap() {
var that = this;
that.setData({
isFocus: true,
})
},
//提交
formSubmit(e) {
// 拿到密码可进行下一步操作，判断密码是否正确在进行一系列交易
console.log(e.detail.value.password)
},
showPopup() {
this.setData({ show: true });
},
onClose() {
this.setData({
show: false
});
},
/**
* 生命周期函数--监听页面加载
*/
onl oad: function (options) {
},
})
css
.Toptitle{
text-align: center;
margin: 60rpx auto 46rpx;
font-size: 40rpx;
font-weight: 600;
}
.content{
/* width: 660rpx; */
padding:0 45rpx;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 100rpx;
}
.iptbox{
width: 110rpx;
height: 96rpx;
border:1rpx solid #ddd;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.ipt{
width: 0;
height: 0;
}
.btn-area{
width: 80%;
margin-top: 60rpx;
}
标签：false,vant,手把手,center,disabled,输入框,微信,true,setData 来源： https://blog.csdn.net/ZiChen_Jiang/article/details/122042817
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。