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