uniapp版微信小程序动态添加文本框

1.效果：

页面代码：

 1 <template>
 2     <view class="content">
 3         <view class='template_title1 flex-x '>
 4             <view>动态添加文本框</view>
 5         </view>
 6         <block v-for="(index) in conLists" :key="index">
 7             <view class='template_title_list flex-x'>
 8                 <view class="del" @tap='del' :data-index='index'>-</view>
 9                 <input placeholder='请填写内容标题' @input='changeConTitle' :data-index='index'></input>
10             </view>
11         </block>
12         <view class='template_title flex-x' @tap='add'>
13             <view class='add_con flex-x'>
14                 <text>+</text>
15                 <view>添加内容</view>
16             </view>
17         </view>
18     </view>
19 </template>

javascript:

 1 <script>
 2     export default {
 3         data() {
 4             return {
 5                 conLists: [],
 6             }
 7         },
 8         onl oad() {
 9 
10         },
11         methods: {
12             add(e) {
13                 var _list = this.conLists;
14                 _list.push("");
15                 this.conLists = _list
16 
17             },
18 
19             /**
20              * 删除内容
21              */
22             del(e) {
23                 var idx = e.currentTarget.dataset.index;
24                 var _list = this.data.conLists;
25                 console.log(idx)
26                 for (let i = 0; i < _list.length; i++) {
27                     if (idx == i) {
28                         _list.splice(idx, 1)
29                     }
30                 }
31                 this.setData({
32                     conLists: _list
33                 })
34             },
35 
36             /**
37              * 获取输入的内容标题
38              */
39             changeConTitle(e) {
40                 var idx = e.currentTarget.dataset.index; //当前下标
41                 var val = e.detail.value; //当前输入的值
42                 var _list = this.data.conLists; //data中存放的数据
43                 for (let i = 0; i < _list.length; i++) {
44                     if (idx == i) {
45                         _list[i] = {
46                             modelLabel: val
47                         } //将当前输入的值放到数组中对应的位置
48                     }
49                 }
50                 this.setData({
51                     conLists: _list
52                 })
53             },
54         }
55     }
56 </script>

样式代码：

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