微信小程序之一：动态添加view（view包含picker,input）

 

　　

 <view  wx:for="{{array}}"  wx:key="this" class="borderContainer">
   <view class="borderContainer1">
     <view class="firstBorder">
       <view class="firstBorderInput">
       <input maxlength="6" bindinput="persionInput{{index}}" wx:if="{{index==0}}" class="textArea" value="{{persionName0}}"></input>
         <input maxlength="6" bindinput="persionInput{{index}}" wx:if="{{index==1}}" class="textArea" value="{{persionName1}}"></input>
         <input maxlength="6" bindinput="persionInput{{index}}" wx:if="{{index==2}}" class="textArea" value="{{persionName2}}"></input>
         <input maxlength="6" bindinput="persionInput{{index}}" wx:if="{{index==3}}" class="textArea" value="{{persionName3}}"></input>
       </view>
       <view class="line" ></view>
       <view class="rightImageBorder">
         <picker bindchange="bottomdowm{{index}}" data-value="{{pickArray[index]}}" data-index="{{index}}" value="{{index}}" range="{{pickArray}}" class="pickBorder">
           <image src="/pages/me/houseOperation/creatFamily/image/button_down.png" class="rightImage"></image>
         </picker>
       </view>
     </view>
   </view>
   <view class="rightBorder">
     <input type="number" bindinput="persiontelInput{{index}}" placeholder="请输入成员号码" maxlength="11" class="cyinputtel"></input>
   </view>
 </view>

.borderContainer {
  height: 10vw;
}

.borderContainer1 {
  float: left;
  padding-left: 4.5vw;
}

.firstBorder {
  line-height: 7.2vw;
  border: 2rpx solid #a0a0a0;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  width: 35vw;
}

.firstBorderInput {
  display: black;
  width: 45%;
  line-height: 5vw;
}

.line {
  width: 1%;
  height: 6.2vw;
  border-right: 1px solid #a0a0a0;
  margin-top: 1vw;
  margin-bottom: 1vw;
}

.rightImageBorder {
  width: 54%;
  display: flex;
  align-items: center;
  position: relative;
}

.pickBorder {
  padding-bottom: 4.3vw;
}
.rightImage{
 height:4.2vw;width:4.2vw; position: absolute;right:41%;
}
.rightBorder{
  display:inline-block;margin:0 1vw;width:40vw;height: 8.2vw;line-height: 8.2vw;border-radius:8rpx;border:2rpx solid #A0A0A0;
}
.meber_add_off_Image{
  width: 52rpx;height: 45rpx;margin:0 2vw;
}

Page({
  /**
   * 页面的初始数据
   */
  data: {
    persionNameResult: [],
    persionTelResult: [],
    //成员名称
    persionName0: '',
    persionName1: '',
    //成员号码
    persiontel0: '',
    persiontel1: '',
    nowIdx: -1,
    array: [{
      member: '',
      memberPhone: ''
    }],
    pickArray: [
      '爸爸',
      '妈妈',
      '老婆',
      '儿子',
      '女儿',
    ],
}
//动态添加view
  addItem: function(e) {
    var that = this;
    let array = {
      member: '',
      memberPhone: ''
    };
    var page = that.data.page;
    if (page < 4) {
      that.setData({
        array: that.data.array.concat(array),
        page: that.data.page + 1,
      });
    } else {
      wx.showToast({
        title: '掌上管家：最多添加四个',
        icon: 'none'
      });
      return false;
    }
  },

  persionInput0: function(e) {
    this.setData({
      persionName0: e.detail.value
    })
  },
  persionInput1: function(e) {
    this.setData({
      persionName1: e.detail.value
    })
  },

  persiontelInput0: function(e) {
    this.setData({
      persiontel0: e.detail.value
    })
  },
  persiontelInput1: function(e) {
    this.setData({
      persiontel1: e.detail.value
    })
  },
formSubmit() {
    var that = this;
    var persionName0 = that.data.persionName0;
    var persionName1 = that.data.persionName1;
    var persiontel0 = that.data.persiontel0;
    var persiontel1 = that.data.persiontel1;
    if (persiontel0 == '' || persiontel1 == '') {}
    if (persiontel0 != '' && persionName0 == '') {
      wx.showToast({
        title: '掌上管家：请输入成员名称',
        icon: 'none'
      })
      return false;
    }
    if (persiontel0 == '' && persionName0 != '') {
      wx.showToast({
        title: '掌上管家：请输入成员号码',
        icon: 'none'
      })
      return false;
    }
    if (persiontel0 != '' && !(/^1[34578]\d{9}$/.test(persiontel0))) {
      wx.showToast({
        title: '掌上管家：请输入正确的成员号码',
        icon: "none",
        mask: true,
        duration: 2000
      })
    }
    if (persiontel1 != '' && persionName1 == '') {
      wx.showToast({
        title: '掌上管家：请输入成员名称',
        icon: 'none'
      })
      return false;
    }
    if (persiontel1 == '' && persionName1 != '') {
      wx.showToast({
        title: '掌上管家：请输入成员号码',
        icon: 'none'
      })
      return false;
    }
    if (persiontel1 != '' && !(/^1[34578]\d{9}$/.test(persiontel1))) {
      wx.showToast({
        title: '掌上管家：请输入正确的成员号码',
        icon: "none",
        mask: true,
        duration: 2000
      })
    }

    var persionNameResult = that.data.persionNameResult;

    persionNameResult.push(persionName0);
    persionNameResult.push(persionName1);
    //console.log(persionNameResult);
    for (var i = 0; i < persionNameResult.length; i++) {
      if (persionNameResult[i] == "" || typeof(persionNameResult[i]) == "undefined") {
        persionNameResult.splice(i, 1);
        i = i - 1;
      }
    }
    var tjpersionName = persionNameResult.join(",");
    //*********************************************** */
    var persionTelResult = that.data.persionTelResult;
    persionTelResult.push(persiontel0);
    persionTelResult.push(persiontel1);
    for (var i = 0; i < persionTelResult.length; i++) {
      if (persionTelResult[i] == "" || typeof(persionTelResult[i]) == "undefined") {
        persionTelResult.splice(i, 1);
        i = i - 1;
      }
    }
    var tjpersionTel = persionTelResult.join(",");
    wx.request({
      url: app.globalData.address + 'url',

      header: {
        // 'content-type': 'application/json;charset=utf-8'
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        //手机号码
        usersArray: tjpersionTel
        //昵称
        nickNamesArray: tjpersionName
      },
      method: "POST",
      success: function(res) {
        console.log(res.data);
        if (res.data.errCode == 1000) {
          wx.showToast({
            title: '创建成功',
            icon: 'none'
          });
          setTimeout(function() {
            wx.navigateTo({
              url: 'url?homeId=' + res.data.homeId
            })
          }, 1000)
        } else {
          wx.showToast({
            title: '创建失败',
            icon: 'loading',
            duration: 1200
          })
        }
      },
      fail: function() {
        wx.showToast({
          title: '服务器网络错误!',
          icon: 'loading',
          duration: 1500
        })
      }
    })
  },
})

  persionInput0: function(e) {
     this.setData({
       persionName0: e.detail.value
     })
   },
   persionInput1: function(e) {
     this.setData({
       persionName1: e.detail.value
     })
   },
   persionInput2: function(e) {
     this.setData({
       persionName2: e.detail.value
     })
   },
 bottomdowm: function (e) {
     var nowData = this.data.pickArray;
     var nowIdx = e.detail.value;
     var nowindex = nowData[nowIdx];
     this.setData({
       persionName: nowindex
     })
   },
   bottomdowm0: function(e) {
     var nowData = this.data.pickArray;
     var nowIdx = e.detail.value;
     var nowindex = nowData[nowIdx];
     this.setData({
       persionName0: nowindex,
     })
   },
   bottomdowm1: function(e) {
     var nowData = this.data.pickArray;
     var nowIdx = e.detail.value;
     var nowindex = nowData[nowIdx];
     this.setData({
       persionName1: nowindex
     })
   },

　　这里所做的就是通过array动态添加view的功能，在为每个动态的picker以及input操作中，都是通过提取array的index操作来为其目标项添加值得操作，虽然这里动态添加的项不是很多，但是多个的话难免有点代码冗余。本人开发小程序不久，如有更好的思路以及做法请在下方留言，一起学习，虽然问题简单，但能够解决问题也是一件很非凡的事！！