1.页面代码:
<block wx:for="{
{lists}}" wx:key="{
{index}}">
<van-field class="phone_div" type="number" value="" name="phone" label="电话" placeholder="请输入你的电话" bindchange="bindPhoneDataChang{
{index}}" />
</block>
<van-button class='="send_code_div"' type="info" disabled="{
{disabled}}" bind:click="onAddPhone">
<text class='code_text'>+</text>
</van-button>
<van-button class='="send_code_div"' type="info" disabled="{
{disabled}}" bind:click="delList">
<text class='code_text'>-</text>
</van-button>
2.js代码:
data: {
lists: [{
value:''
}]
},
onAddPhone: function () {
var lists = this.data.lists;
var newData = { value: ''};
if (lists.length >= 3) {
Dialog.alert({
message: '最多再增加2个输入框'
});
return
动态增删输入框实现

本文介绍了一种在小程序中动态增加和删除电话输入框的方法,通过JS代码控制页面元素的增减,同时展示了如何使用van-field和van-button组件进行布局和交互。代码实现了输入框数量的限制和默认输入框的保护。
最低0.47元/天 解锁文章
485





