微信小程序开发之 数组追加元素
凌雪 2018-08-01 来源 :网络 阅读 12297 评论 0

摘要:本文将带你了解微信小程序开发之 数组追加元素,希望本文对大家学微信有所帮助

本文将带你了解微信小程序开发之 数组追加元素,希望本文对大家学微信有所帮助


* 手机 {{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>
         

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!

本文由 @凌雪 发布于职坐标。未经许可,禁止转载。
喜欢 | 18 不喜欢 | 9
看完这篇文章有何感觉?已经有27人表态,67%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程