小程序动态添加input(一)

之前在开发过程中遇到这么一个需求，就是在创建模板得时候需要有很多标题，标题是动态添加得，且添加得标题可以删除，最终实现得效果图如下：

代码部分：

 1 <!--index.wxml-->
 2 <view class="container">
 3   <view class='template_title1 flex-x '>
 4     <view>模板内容</view>
 5   </view>
 6 
 7   <block wx:for="{{conLists}}" wx:key="index">
 8     <view class='template_title_list flex-x'>
 9       <view class="del" bindtap='del' data-index='{{index}}'>-</view>
10 
11       <input placeholder='请填写内容标题' bindinput='changeConTitle' data-index='{{index}}'></input>
12     </view>
13   </block>
14 
15   <view class='template_title flex-x' bindtap='add'>
16     <view class='add_con flex-x'>
17       <text>+</text>
18       <view>添加内容</view>
19     </view>
20   </view>
21 
22   <button class="btn" type="primary" bindtap="next">下一步</button>
23 </view>

 1 /**index.wxss**/
 2 
 3 page {
 4   background: #f2f2f2;
 5 }
 6 
 7 .flex-x {
 8   display: flex;
 9   align-items: center;
10 }
11 
12 .template_title, .template_title1, .template_title_list {
13   height: 90rpx;
14   background: #fff;
15   justify-content: space-between;
16   padding: 0 30rpx;
17   box-sizing: border-box;
18 }
19 
20 .template_title1 {
21   background: none;
22 }
23 
24 .template_title_list {
25   margin-bottom: 4rpx;
26 }
27 
28 .template_title > view, .template_title1 > view {
29   font-size: 32rpx;
30   color: #8f8f8f;
31   flex-shrink: 0;
32   margin-right: 20rpx;
33 }
34 
35 .template_title > input {
36   font-size: 28rpx;
37   color: #808080;
38   text-align: right;
39   flex-grow: 1;
40 }
41 
42 /* 添加内容 */
43 
44 .add_con > text {
45   font-size: 40rpx;
46   color: #f16765;
47   display: block;
48   margin-right: 20rpx;
49   margin-left: 10rpx;
50   line-height: 44rpx;
51 }
52 
53 .add_con > view {
54   font-size: 32rpx;
55   color: #7885cb;
56 }
57 
58 /* 删除内容 */
59 
60 .del {
61   font-size: 32rpx;
62   color: #f16765;
63   margin-right: 14rpx;
64   padding: 20rpx;
65 }
66 
67 input {
68   flex-grow: 1;
69   font-size: 28rpx;
70   color: #808080;
71 }
72 
73 .btn {
74   margin-top: 100rpx;
75 }

 1 //index.js
 2 Page({
 3 
 4   /**
 5    * 页面的初始数据
 6    */
 7   data: {
 8     conLists: [], //内容标题（如：今天完成工作、备注、次日工作安排）可以添加或者删除
 9   },
10 
11   /**
12  * 添加内容
13  */
14   add(e) {
15     // 点击添加按钮，就往数组里添加一条空数据
16     var _list = this.data.conLists;
17     _list.push("")
18     this.setData({
19       conLists: _list
20     })
21   },
22 
23   /**
24    * 删除内容
25    */
26   del(e) {
27     var idx = e.currentTarget.dataset.index;
28     var _list = this.data.conLists;
29     console.log(idx)
30     for (let i = 0; i < _list.length; i++) {
31       if (idx == i) {
32         _list.splice(idx, 1)
33       }
34     }
35     this.setData({
36       conLists: _list
37     })
38   },
39 
40   /**
41  * 获取输入的内容标题
42  */
43   changeConTitle(e) {
44     var idx = e.currentTarget.dataset.index; //当前下标
45     var val = e.detail.value; //当前输入的值
46     var _list = this.data.conLists; //data中存放的数据
47     for (let i = 0; i < _list.length; i++) {
48       if (idx == i) {
49         _list[i] = { modelLabel: val } //将当前输入的值放到数组中对应的位置
50       }
51     }
52     this.setData({
53       conLists: _list
54     })
55   },
56 
57   /**
58  * 下一步
59  */
60   next(e) {
61     var _conLists = this.data.conLists;
62     console.log('这是模板内容标题数组', _conLists)
63     for (let i = 0; i < _conLists.length; i++) {
64       if (!_conLists[i]) {
65         wx.showToast({
66           title: '请输入第' + `${i * 1 + 1}` + '条的模板内容标题！',
67           icon: 'none'
68         })
69         return;
70       }
71     }
72   },
73 
74 })