小程序动态添加input(二)之添加联系人
利用input实现手机通讯录添加联系人得功能（动态添加删除input），当输入新手机号得时候，自动增加一个input出来，当删除输入得手机号后，自动删除该input，在这里记录下来。最终效果图如下：
这里只展示动态添加联系人得部分，代码如下：
1 <!--pages/contact/contact.wxml--> 2 <view class='container'> 3 4 <form bindsubmit="formSubmit"> 5 <view class='list flex-x'> 6 <view class='list_name'> 7 <text class='red_color'>*</text>姓名 8 </view> 9 <input placeholder='请输入联系人姓名' name="name" maxlength="6" value="{{name}}" placeholder-style='font-size:28rpx;color#828282;'></input> 10 <image src='../../image/right_icon.png'></image> 11 </view> 12 13 <!-- 动态添加的手机号输入框 --> 14 <block wx:if="{{phoneList.length != 0}}"> 15 <view class='list flex-x' wx:for="{{phoneList}}" wx:key="index"> 16 <view class='list_name'> 17 <text class='red_color'>*</text>手机 18 </view> 19 <input placeholder='请输入手机号码' name="phone{{index}}" value='{{item.phone}}' focus='{{focus}}' type='number' maxlength='11' placeholder-style='font-size:28rpx;color#828282;' bindinput='changeInput' data-idx='{{index}}'></input> 20 <image src='../../image/del_icon.png' bindtap='delInput' data-idx='{{index}}'></image> 21 </view> 22 </block> 23 24 <!-- 固定的添加手机号输入框 --> 25 <view class='list flex-x'> 26 <view class='list_name'> 27 <text class='red_color'>*</text>手机 28 </view> 29 <input placeholder='请输入手机号码' name="phone" type='number' value='{{inputVal}}' maxlength='11' placeholder-style='font-size:28rpx;color#828282;' bindinput='changePhone'></input> 30 <image src='../../image/right_icon.png'></image> 31 </view> 32 33 <button class='button' form-type='submit' type="primary">保存</button> 34 </form> 35 36 37 </view>
1 /* pages/contact/contact.wxss */ 2 3 page { 4 background: #f2f2f2; 5 } 6 7 .container { 8 padding-bottom: 96rpx; 9 box-sizing: border-box; 10 } 11 12 .flex-x { 13 display: flex; 14 align-items: center; 15 } 16 17 .list { 18 width: 100%; 19 height: 88rpx; 20 background: #fff; 21 margin-bottom: 4rpx; 22 padding: 0 30rpx; 23 box-sizing: border-box; 24 } 25 26 .list_name { 27 min-width: 10%; 28 flex-shrink: 0; 29 font-size: 28rpx; 30 color: #828282; 31 text-align: right; 32 } 33 34 text.red_color { 35 color: #f00; 36 } 37 38 .list > input { 39 height: 100%; 40 } 41 42 .list > input { 43 flex-grow: 1; 44 overflow: hidden; 45 text-overflow: ellipsis; 46 white-space: nowrap; 47 font-size: 28rpx; 48 color: #828282; 49 text-align: right; 50 } 51 52 .list > image { 53 width: 32rpx; 54 height: 32rpx; 55 margin-left: 20rpx; 56 flex-shrink: 0; 57 } 58 59 .button { 60 margin-top: 100rpx; 61 }
1 // pages/contact/contact.js 2 Page({ 3 4 /** 5 * 页面的初始数据 6 */ 7 data: { 8 phoneList: [], //手机号列表--动态 9 phoneVal: '', //输入的手机号--动态 10 inputVal: '', //输入的手机号--固定 11 focus: true, //控制动态输入框是否聚焦，清空的时候需要关闭聚焦 12 }, 13 14 /** 15 * 获取输入的手机号--固定手机号输入框 16 */ 17 changePhone(e) { 18 // console.log(e.detail.value) 19 var val = e.detail.value; 20 if (val) { 21 var phoneListOld = this.data.phoneList; 22 var phoneListNew = phoneListOld.concat({ 23 phone: val 24 }); 25 // console.log('插入后的数组', phoneListNew) 26 this.setData({ 27 phoneList: phoneListNew, //更新数组 28 inputVal: '', //清空固定的input值 29 focus: true, //动态input聚焦 30 }) 31 } 32 }, 33 34 /** 35 * 监听是否输入--动态手机号输入框 36 */ 37 changeInput(e) { 38 // console.log(e) 39 var val = e.detail.value; 40 var idx = e.currentTarget.dataset.idx; 41 var phoneListOld = this.data.phoneList; 42 // console.log('data中的手机号数组', phoneListOld) 43 // 输入值的时候将数组中对应的值更新 44 phoneListOld[idx].phone = val 45 // console.log('赋值后的数组', phoneListOld) 46 47 // 清空inout的时候就将当前清空的input删除 48 if (!val) { 49 phoneListOld.splice(idx, 1) 50 this.setData({ 51 focus: false 52 }) 53 } 54 this.setData({ 55 phoneList: phoneListOld, 56 }) 57 // console.log('更新后的数组', phoneListOld) 58 }, 59 60 /** 61 * 点击删除对应的input 62 */ 63 delInput(e) { 64 var idx = e.currentTarget.dataset.idx; 65 var phoneListOld = this.data.phoneList; 66 phoneListOld.splice(idx, 1) 67 this.setData({ 68 phoneList: phoneListOld, 69 }) 70 }, 71 72 /** 73 * 保存 74 * 在form表单事件中,使用wx.showToast会报错，原因我也没查出来，查出来得同学可以告知一下我 75 * 这里我使用得vant-ui组件中得toast提示框https://youzan.github.io/vant-weapp/#/quickstart 76 */ 77 formSubmit(e) { 78 console.log('获取所有input值', e) 79 var params = e.detail.value; 80 console.log(params) 81 return; 82 if (!params.name) { 83 wx.showToast({ 84 title: '请输入姓名！', 85 icon: 'none' 86 }) 87 } else if (!params.phone0) { 88 Toast({ 89 mask: false, 90 duration: 1500, 91 message: '请输入手机号！', 92 forbidClick: true, //禁止背景点击 93 }) 94 } else { 95 // do thing... 96 } 97 }, 98 99 })
