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