小程序动态添加input(一)

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

代码部分：

<!--index.wxml-->
<view class="container">
  <view class='template_title1 flex-x '>
    <view>模板内容</view>
  </view>

  <block wx:for="{{conLists}}" wx:key="index">
    <view class='template_title_list flex-x'>
      <view class="del" bindtap='del' data-index='{{index}}'>-</view>

      <input placeholder='请填写内容标题' bindinput='changeConTitle' data-index='{{index}}'></input>
    </view>
  </block>

  <view class='template_title flex-x' bindtap='add'>
    <view class='add_con flex-x'>
      <text>+</text>
      <view>添加内容</view>
    </view>
  </view>

  <button class="btn" type="primary" bindtap="next">下一步</button>
</view>

/**index.wxss**/

page {
  background: #f2f2f2;
}

.flex-x {
  display: flex;
  align-items: center;
}

.template_title, .template_title1, .template_title_list {
  height: 90rpx;
  background: #fff;
  justify-content: space-between;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.template_title1 {
  background: none;
}

.template_title_list {
  margin-bottom: 4rpx;
}

.template_title > view, .template_title1 > view {
  font-size: 32rpx;
  color: #8f8f8f;
  flex-shrink: 0;
  margin-right: 20rpx;
}

.template_title > input {
  font-size: 28rpx;
  color: #808080;
  text-align: right;
  flex-grow: 1;
}

/* 添加内容 */

.add_con > text {
  font-size: 40rpx;
  color: #f16765;
  display: block;
  margin-right: 20rpx;
  margin-left: 10rpx;
  line-height: 44rpx;
}

.add_con > view {
  font-size: 32rpx;
  color: #7885cb;
}

/* 删除内容 */

.del {
  font-size: 32rpx;
  color: #f16765;
  margin-right: 14rpx;
  padding: 20rpx;
}

input {
  flex-grow: 1;
  font-size: 28rpx;
  color: #808080;
}

.btn {
  margin-top: 100rpx;
}

//index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    conLists: [], //内容标题（如：今天完成工作、备注、次日工作安排）可以添加或者删除
  },

  /**
 * 添加内容
 */
  add(e) {
    // 点击添加按钮，就往数组里添加一条空数据
    var _list = this.data.conLists;
    _list.push("")
    this.setData({
      conLists: _list
    })
  },

  /**
   * 删除内容
   */
  del(e) {
    var idx = e.currentTarget.dataset.index;
    var _list = this.data.conLists;
    console.log(idx)
    for (let i = 0; i < _list.length; i++) {
      if (idx == i) {
        _list.splice(idx, 1)
      }
    }
    this.setData({
      conLists: _list
    })
  },

  /**
 * 获取输入的内容标题
 */
  changeConTitle(e) {
    var idx = e.currentTarget.dataset.index; //当前下标
    var val = e.detail.value; //当前输入的值
    var _list = this.data.conLists; //data中存放的数据
    for (let i = 0; i < _list.length; i++) {
      if (idx == i) {
        _list[i] = { modelLabel: val } //将当前输入的值放到数组中对应的位置
      }
    }
    this.setData({
      conLists: _list
    })
  },

  /**
 * 下一步
 */
  next(e) {
    var _conLists = this.data.conLists;
    console.log('这是模板内容标题数组', _conLists)
    for (let i = 0; i < _conLists.length; i++) {
      if (!_conLists[i]) {
        wx.showToast({
          title: '请输入第' + `${i * 1 + 1}` + '条的模板内容标题！',
          icon: 'none'
        })
        return;
      }
    }
  },

})