小程序動態添加input(二)之添加聯系人

利用input實現手機通訊錄添加聯系人得功能（動態添加刪除input），當輸入新手機號得時候，自動增加一個input出來，當刪除輸入得手機號后，自動刪除該input，在這里記錄下來。最終效果圖如下：

這里只展示動態添加聯系人得部分，代碼如下：

<!--pages/contact/contact.wxml-->
<view class='container'>

  <form bindsubmit="formSubmit">
    <view class='list flex-x'>
      <view class='list_name'>
        <text class='red_color'>*</text>姓名
      </view>
      <input placeholder='請輸入聯系人姓名' name="name" maxlength="6" value="{{name}}" placeholder-style='font-size:28rpx;color#828282;'></input>
      <image src='../../image/right_icon.png'></image>
    </view>

    <!-- 動態添加的手機號輸入框 -->
    <block wx:if="{{phoneList.length != 0}}">
      <view class='list flex-x' wx:for="{{phoneList}}" wx:key="index">
        <view class='list_name'>
          <text class='red_color'>*</text>手機
        </view>
        <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>
        <image src='../../image/del_icon.png' bindtap='delInput' data-idx='{{index}}'></image>
      </view>
    </block>

    <!-- 固定的添加手機號輸入框 -->
    <view class='list flex-x'>
      <view class='list_name'>
        <text class='red_color'>*</text>手機
      </view>
      <input placeholder='請輸入手機號碼' name="phone" type='number' value='{{inputVal}}' maxlength='11' placeholder-style='font-size:28rpx;color#828282;' bindinput='changePhone'></input>
      <image src='../../image/right_icon.png'></image>
    </view>

    <button class='button' form-type='submit' type="primary">保存</button>
  </form>


</view>

 

/* pages/contact/contact.wxss */

page {
  background: #f2f2f2;
}

.container {
  padding-bottom: 96rpx;
  box-sizing: border-box;
}

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

.list {
  width: 100%;
  height: 88rpx;
  background: #fff;
  margin-bottom: 4rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.list_name {
  min-width: 10%;
  flex-shrink: 0;
  font-size: 28rpx;
  color: #828282;
  text-align: right;
}

text.red_color {
  color: #f00;
}

.list > input {
  height: 100%;
}

.list > input {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 28rpx;
  color: #828282;
  text-align: right;
}

.list > image {
  width: 32rpx;
  height: 32rpx;
  margin-left: 20rpx;
  flex-shrink: 0;
}

.button {
  margin-top: 100rpx;
}

 

// pages/contact/contact.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    phoneList: [], //手機號列表--動態
    phoneVal: '', //輸入的手機號--動態
    inputVal: '', //輸入的手機號--固定
    focus: true, //控制動態輸入框是否聚焦，清空的時候需要關閉聚焦
  },

  /**
 * 獲取輸入的手機號--固定手機號輸入框
 */
  changePhone(e) {
    // console.log(e.detail.value)
    var val = e.detail.value;
    if (val) {
      var phoneListOld = this.data.phoneList;
      var phoneListNew = phoneListOld.concat({
        phone: val
      });
      // console.log('插入后的數組', phoneListNew)
      this.setData({
        phoneList: phoneListNew, //更新數組
        inputVal: '', //清空固定的input值
        focus: true, //動態input聚焦
      })
    }
  },

  /**
   * 監聽是否輸入--動態手機號輸入框
   */
  changeInput(e) {
    // console.log(e)
    var val = e.detail.value;
    var idx = e.currentTarget.dataset.idx;
    var phoneListOld = this.data.phoneList;
    // console.log('data中的手機號數組', phoneListOld)
    // 輸入值的時候將數組中對應的值更新
    phoneListOld[idx].phone = val
    // console.log('賦值后的數組', phoneListOld)

    // 清空inout的時候就將當前清空的input刪除
    if (!val) {
      phoneListOld.splice(idx, 1)
      this.setData({
        focus: false
      })
    }
    this.setData({
      phoneList: phoneListOld,
    })
    // console.log('更新后的數組', phoneListOld)
  },

  /**
   * 點擊刪除對應的input
   */
  delInput(e) {
    var idx = e.currentTarget.dataset.idx;
    var phoneListOld = this.data.phoneList;
    phoneListOld.splice(idx, 1)
    this.setData({
      phoneList: phoneListOld,
    })
  },

  /**
 * 保存
 * 在form表單事件中,使用wx.showToast會報錯，原因我也沒查出來，查出來得同學可以告知一下我
 * 這里我使用得vant-ui組件中得toast提示框https://youzan.github.io/vant-weapp/#/quickstart
 */
  formSubmit(e) {
    console.log('獲取所有input值', e)
    var params = e.detail.value;
    console.log(params)
    return;
    if (!params.name) {
      wx.showToast({
        title: '請輸入姓名！',
        icon: 'none'
      })
    } else if (!params.phone0) {
      Toast({
        mask: false,
        duration: 1500,
        message: '請輸入手機號！',
        forbidClick: true,  //禁止背景點擊
      })
    } else {
      // do thing...
    }
  },

})