微信小程序之一：動態添加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
        })
      }
    })
  },
})

View Code

 

　　這裏所作的就是經過array動態添加view的功能，在爲每一個動態的picker以及input操做中，都是經過提取array的index操做來爲其目標項添加值得操做，雖然這裏動態添加的項不是不少，可是多個的話不免有點代碼冗餘。本人開發小程序不久，若有更好的思路以及作法請在下方留言，一塊兒學習，雖然問題簡單，但可以解決問題也是一件很非凡的事！！