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 })