微信小程序 數組追加元素

• 1. * 手機 {{item.custPhone}} 默認
  2. 手機 - 固話 手機 刪除
  添加電話
• 

• 點擊固話切換樣式，

思路：

　1.先寫好需要展示的樣式，和需要添加電話的樣式，通過wx:if="{{!item.updateSgin}}"條件語句進行判斷 是否是后台數據傳過來的（false），還是新添加的(ture);

　2.加載數據時，已經定義好數組及把數據放入數組中了；

   3.點擊添加電話，給一個空的內容，及標志添加樣式，追加進數組里，用setData重新賦值；

success: function (res) {
     wx.hideLoading();
     var cust = res.data.dataJson.customerProduct.customer;
     var custPhones = cust.custPhone.split(',')；
　　　　//將顯示電話，通過，分割字符串，設置一個數組；
     var custPhoneArr = _this.data.custPhoneArr
     for (var i = 0; i < custPhones.length; i++) {
         var obj = {
            custPhone: custPhones[i],
            updateSgin: false
          //標志顯示電話
         }
         custPhoneArr.push(obj);
　　　　　//將電話號碼放入custPhoneArr數組中；

} 
_this.setData({ 
　　　　custPhoneArr: custPhoneArr, 
　　　　//賦值
})
}

　　

//添加電話
addPhoneShow:function(){
    var _this=this;
    var custPhones = _this.data.custPhoneArr;
　　//定義一個要使用的變量名
    if (custPhones.length >= 5) {
      wx.showToast({
        title: '最多添加5個',
      })
    } else {
      var obj = {
        custPhone: "",
        updateSgin: true
　　　　//標志添加電話樣式
      }
      custPhones.push(obj)
　　　　//追加一個內容為空的，（先占個地~）
      this.setData({
        custPhoneArr: custPhones
　　　　//重新給custPhoneArr賦值

　　  })
　　 } 
}, 

//添加電話，進行刪除功能
delAddShow: function(e) {
    var _this = this;
    console.log(e);
    wx.showModal({
      title: '',
      content: '是否真的要刪除',
      confirmColor:'#3491f0',
      success: function (res) {
        if (res.confirm) {
          var custPhones = _this.data.custPhoneArr
          var index = e.currentTarget.dataset.index
　　　　　　//點擊獲取，想要操作元素的下標
          custPhones.splice(index, 1);
　　　　　　//使用splice，進行刪除元素
          console.log(custPhones);
          _this.setData({
            custPhoneArr: custPhones
　　　　　　//重新賦值
          })
        }
      }
    })
  },

　　

 

  <li class="phoneBox">
          <ol>
            <block wx:for="{{custPhoneArr}}" wx:key="item" wx:for-index='i'>
              <li class="li-inner notmodefy" wx:if="{{!item.updateSgin}}">							
                <view class="phone">
                  <span class="sign">*</span>
                  <span class="k">手機</span> 
                  <span class="v"> 
                    <view class="sel">
                      <span id="custPhone{{i}}" class="custPhone contrl_value">{{item.custPhone}}</span>
                      <view wx:if="{{i !==0 }}"><span class="select-tag" bindtap="setDefault" id="{{i}}">默認</span></view>								
                    </view>     
                  </span>
                </view>							
              </li>
              <li id="iphone{{i}}" class="li-inner notmodefy" wx:if="{{item.updateSgin}}">
                <view class='part_2'>
                  <view class="phone">
                    <span class="k">手機</span> 
                    <span class="v"> 
                      <view class="mPhone sel" wx:if="{{phoneWay}}">
                        <input type="tel" data-index="{{i}}" value="{{item.custPhone}}"
                          class="custPhone contrl_value" bindinput="doCustPhone" maxlength="11" placeholder="請輸入手機"/> 				
                      </view>
                      <view class="fPhone" wx:if="{{!phoneWay}}">
                        <input type="tel" class="qh" maxlength="4" placeholder="區號" value=""/>
                        <view class="ljf">-</view>
                        <input type="tel" class="num" maxlength="8" placeholder="電話號碼" value=""/>
                      </view>
                      <view class="way" wx:if="{{phoneWay}}" bindtap='phoneWayShow'>固話</view>
                      <view class="way" wx:if="{{!phoneWay}}" bindtap='phoneWayShow'>手機</view>
                      <view class="option" bindtap='delAddShow' data-index="{{i}}">
                        <span class="phone-del">刪除</span>
                      </view>
                    </span>
                  </view>				
                </view>
              </li>
            </block>
          </ol>
          <view data-ac="active" id="add-phone" class="add-phone" bindtap='addPhoneShow'>
            <image src='../../images/icon/customer-icons.png'></image>添加電話
          </view>       
        </li>