频道栏目
首页 > 微信学院 > 微信小程序 > 正文

微信小程序 数组追加元素教程

2018-03-02 09:57:29      个评论      
收藏   我要投稿

手机 {{item.custPhone}} 默认
手机
{{item.custPhone}}

-
固话 手机 删除
添加电话

  • 点击固话切换样式,

    思路:

     1.先写好需要展示的样式,和需要添加电话的样式,通过wx:if="{{!item.updateSgin}}"条件语句进行判断 是否是后台数据传过来的(false),还是新添加的(ture);

     2.加载数据时,已经定义好数组及把数据放入数组中了;

    3.点击添加电话,给一个空的内容,及标志添加样式,追加进数组里,用setData重新赋值;

     

    
    
    1. success: function (res) {
    2. wx.hideLoading();
    3. var cust = res.data.dataJson.customerProduct.customer;
    4. var custPhones = cust.custPhone.split(',');
          //将显示电话,通过,分割字符串,设置一个数组;
    5. var custPhoneArr = _this.data.custPhoneArr
    6. for (var i = 0; i < custPhones.length; i++) {
    7. var obj = {
    8. custPhone: custPhones[i],
    9. updateSgin: false
      //标志显示电话
    10. }
    11. custPhoneArr.push(obj);
           //将电话号码放入custPhoneArr数组中;

     

    
    
    1. }
      _this.setData({
          custPhoneArr: custPhoneArr,
          //赋值
      })
      }
    2.  
    3.  
    4. //添加电话
      addPhoneShow:function(){
    5. var _this=this;
    6. var custPhones = _this.data.custPhoneArr;
        //定义一个要使用的变量名
    7. if (custPhones.length >= 5) {
    8. wx.showToast({
    9. title: '最多添加5个',
    10. })
    11. } else {
    12. var obj = {
    13. custPhone: "",
    14. updateSgin: true
          //标志添加电话样式
    15. }
    16. custPhones.push(obj)
          //追加一个内容为空的,(先占个地~)
    17. this.setData({
    18. custPhoneArr: custPhones
          //重新给custPhoneArr赋值
    19. })
         }
      },
    1. //添加电话,进行删除功能
      delAddShow: function(e) {
    2. var _this = this;
    3. console.log(e);
    4. wx.showModal({
    5. title: '',
    6. content: '是否真的要删除',
    7. confirmColor:'#3491f0',
    8. success: function (res) {
    9. if (res.confirm) {
    10. var custPhones = _this.data.custPhoneArr
    11. var index = e.currentTarget.dataset.index
            //点击获取,想要操作元素的下标
    12. custPhones.splice(index, 1);
            //使用splice,进行删除元素
    13. console.log(custPhones);
    14. _this.setData({
    15. custPhoneArr: custPhones
            //重新赋值
    16. })
    17. }
    18. }
    19. })
    20. },
    
    
      1. *
      2. 手机
      3. {{item.custPhone}}
      4. 默认
      5. 手机
      6. class="custPhone contrl_value" bindinput="doCustPhone" maxlength="11" placeholder="请输入手机"/>
      7. -
上一篇:微信小程序问题介绍
下一篇:微信小程序 canvas 雪花效果 闪动星星效果教程
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站