之前在開發過程中遇到這么一個需求，就是在創建模板得時候需要有很多標題，標題是動態添加得，且添加得標題可以刪除，最終實現得效果圖如下：
代碼部分：
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 })