摘要:本文将带你了解微信小程序开发之 数组追加元素,希望本文对大家学微信有所帮助
本文将带你了解微信小程序开发之 数组追加元素,希望本文对大家学微信有所帮助
* 手机 {{item.custPhone}} 默认手机 - 固话 手机 删除添加电话点击固话切换样式,思路: 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(',');<br> //将显示电话,通过,分割字符串,设置一个数组;
var custPhoneArr = _this.data.custPhoneArr
for (var i = 0; i < custPhones.length; i++) {
var obj = {
custPhone: custPhones[i],
updateSgin: false<br> //标志显示电话
}
custPhoneArr.push(obj);<br> //将电话号码放入custPhoneArr数组中;
1} <br>_this.setData({ <br> custPhoneArr: custPhoneArr, <br> //赋值<br>})<br>}
//添加电话<br>addPhoneShow:function(){
var _this=this;
var custPhones = _this.data.custPhoneArr;<br> //定义一个要使用的变量名
if (custPhones.length >= 5) {
wx.showToast({
title: '最多添加5个',
})
} else {
var obj = {
custPhone: "",
updateSgin: true<br> //标志添加电话样式
}
custPhones.push(obj)<br> //追加一个内容为空的,(先占个地~)
this.setData({
custPhoneArr: custPhones<br> //重新给custPhoneArr赋值
})<br> } <br>},
//添加电话,进行删除功能<br>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<br> //点击获取,想要操作元素的下标
custPhones.splice(index, 1);<br> //使用splice,进行删除元素
console.log(custPhones);
_this.setData({
custPhoneArr: custPhones<br> //重新赋值
})
}
}
})
},
<li>
<ol>
<block wx:for="{{custPhoneArr}}" wx:key="item" wx:for-index='i'>
<li class="li-inner notmodefy" wx:if="{{!item.updateSgin}}">
<view>
<span>*</span>
<span>手机</span>
<span>
<view>
<span id="custPhone{{i}}" class="custPhone contrl_value">{{item.custPhone}}</span>
<view wx:if="{{i !==0 }}"><span bindtap="setDefault" id="{{i}}">默认</span></view>
</view>
</span>
</view>
</li>
<li id="iphone{{i}}" class="li-inner notmodefy" wx:if="{{item.updateSgin}}">
<view>
<view>
<span>手机</span>
<span>
<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 wx:if="{{!phoneWay}}">
<input type="tel" maxlength="4" placeholder="区号" value=""/>
<view>-</view>
<input type="tel" maxlength="8" placeholder="电话号码" value=""/>
</view>
<view wx:if="{{phoneWay}}" bindtap='phoneWayShow'>固话</view>
<view wx:if="{{!phoneWay}}" bindtap='phoneWayShow'>手机</view>
<view bindtap='delAddShow' data-index="{{i}}">
<span>删除</span>
</view>
</span>
</view>
</view>
</li>
</block>
</ol>
<view data-ac="active" id="add-phone" bindtap='addPhoneShow'>
<image src='../../images/icon/customer-icons.png'></image>添加电话
</view>
</li><br><br>
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号