微信小程序 动态添加 view input picker
微信小程序 动态添加view、input、picker等，添加之后取到input或者picker的值传给后台时，取到的这些值为数组，因为动态添加的无法给它们设置唯一的name值或class值。效果如下：
index.wxml
<!-- checkout.wxml --> <view class="container"> <form bindsubmit="save"> <!-- Total --> <view class="confirm-summury"> <view class="summury-total" style="height: 85rpx;"> <view style="float:left;">订单信息</view> <view class="xinzeng" bindtap="addView">+</view> </view> <view wx:for="{{view_arr}}"> <view class="summury-detail"> 汽车品牌： <input placeholder="请输入汽车品牌" bindinput="car_brand" data-idx="{{index}}"></input> </view> <view class="summury-detail"> 汽车车型： <input placeholder="请输入汽车车型" bindinput="car_model" data-idx="{{index}}"></input> </view> <view class="summury-detail"> <view style="float:left;">脚垫类型：</view> <picker bindchange="bindPadChange" data-idx="{{index}}" value="{{index2[index]?index2[index]:0}}" range="{{pad}}" class="picker" style="margin-left: 10rpx;"> <view class="picker" class="input-item"> {{pad[index2[index]?index2[index]:0]}} </view> </picker> </view> <view class="summury-detail"> 脚垫数量： <input placeholder="请输入脚垫数量" bindinput="pad_num" data-idx="{{index}}"></input> </view> </view> </view> <!-- Submit --> <view class="confirm-submit"> <button formType="submit" class="submit-button dark active" style="margin-bottom: 50rpx;"> 提交 </button> </view> </form> </view>
index.wxss
/* checkout.wxss */ page, .container{ height: 100%; padding: 0; } .confirm-summury { position: relative; display: block; width: 100%; box-sizing: border-box; border-top: #e2e2e2 1px solid; border-bottom: #e2e2e2 1px solid; background-color: #ffffff; margin-top: 20rpx; /* padding-bottom: 120rpx; */ } .confirm-summury .summury-total { display: block; height: 68rpx; overflow: hidden; color: #404245; font-size: 30rpx; font-weight: bold; line-height: 68rpx; padding-left: 28rpx; } .confirm-summury .summury-total .xinzeng { float: right; color: #000; width: 53rpx; text-align: center; border-radius: 50%; margin-right: 32rpx; margin-top: 15rpx; height: 53rpx; line-height: 44rpx; border: 1px solid #000; font-size: 42rpx; } .confirm-summury .summury-detail { display: block; height: 80rpx; line-height: 80rpx; border-bottom:1px solid #ddd; overflow: hidden; font-size: 26rpx; font-weight: normal; margin:0 28rpx 28rpx 28rpx; } .confirm-summury .summury-detail input{ float: right; width: 560rpx; line-height: 80rpx; height: 80rpx; } .confirm-submit { z-index: 100; width: 100%; height: 88rpx; box-sizing: border-box; } .confirm-submit .submit-total { float: left; position: relative; display: block; width: 60%; height: 100%; box-sizing: border-box; color: #404245; font-size: 28rpx; font-weight: normal; text-align: right; line-height: 70rpx; background-color: #f7f7f7; padding-right: 16rpx; } .confirm-submit .submit-total .total-discount { width: 100%; height: 40rpx; color: #64686d; font-size: 26rpx; font-weight: bold; text-align: right; line-height: 40rpx; } .confirm-submit .submit-button { float: left; position: relative; display: block; width: 40%; height: 100%; box-sizing: border-box; color: #404245; background-color: #f7f7f7; line-height: 70rpx; text-align: center; opacity: 0.25; } .confirm-submit .submit-button.active { opacity: 1.0; } .confirm-submit .submit-button.dark { color: #ffffff; background-color: #555555; } .confirm-submit .submit-button.dark.active { color: #ffffff; background-color: #2E3760; margin-top: 80rpx; width: 80%; margin-left: 10%; border-radius: 20rpx; font-size: 30rpx; } .picker{ float: left; margin-left: 32rpx; }
index.js
import util from '../../utils/util.js'; Page({ /** * 页面的初始数据 */ data: { pad: ['请选择类型','类型1','类型2','类型3'], //脚垫类型 index2: [0], view_arr: [1], // 循环view组件数组值 car_brand: [], //汽车品牌 car_model: [], //汽车车型 pad_num: [], //脚垫数量 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, //添加 addView:function(){ var old=this.data.view_arr; old.push(1);//这里不管push什么，只要数组长度增加1就行 this.setData({ view_arr: old }) }, // 汽车品牌 car_brand: function(e) { var nowIdx=e.currentTarget.dataset.idx;//获取当前索引 var val=e.detail.value;//获取输入的值 var oldVal=this.data.car_brand; oldVal[nowIdx]=val;//修改对应索引值的内容 this.setData({ car_brand:oldVal }) }, // 汽车车型 car_model: function(e) { var nowIdx=e.currentTarget.dataset.idx;//获取当前索引 var val=e.detail.value;//获取输入的值 var oldVal=this.data.car_model; oldVal[nowIdx]=val;//修改对应索引值的内容 this.setData({ car_model:oldVal }) }, // 脚垫数量 pad_num: function(e) { var nowIdx=e.currentTarget.dataset.idx;//获取当前索引 var val=e.detail.value;//获取输入的值 var oldVal=this.data.pad_num; oldVal[nowIdx]=val;//修改对应索引值的内容 this.setData({ pad_num:oldVal }) }, // 脚垫类型 bindPadChange: function (e) { var nowIdx=e.currentTarget.dataset.idx;//获取当前索引 var val=e.detail.value;//获取输入的值 var oldVal=this.data.index2; oldVal[nowIdx]=val;//修改对应索引值的内容 this.setData({ // index2: e.detail.value, index2: oldVal }) }, // 保存 save(event) { let self = this, eventDA = event.detail.value; if (self.data.car_brand.length <= 0) { util.showToast('请输入汽车品牌', 'none'); return false; } if (self.data.car_model.length <= 0) { util.showToast('请输入汽车车型', 'none'); return false; } var foot_pad = []; var foot_id = []; var suoyin = self.data.index2; var pad = self.data.pad; var pad_id = self.data.pad_id; if(suoyin[0] == 0){ util.showToast('请选择脚垫类型', 'none'); return false; }else{ suoyin.forEach(function (value,index, array){ foot_pad[index] = pad[value]; foot_id[index] = pad_id[value]; }) } if (self.data.pad_num.length <= 0) { util.showToast('请输入脚垫数量', 'none'); return false; } util.request(util.apiUrl + 'order.create', 'POST', { car_brand: self.data.car_brand, car_model: self.data.car_model, foot_pad: foot_pad, pad_num: self.data.pad_num, }).then(res => { util.showToast('创建成功！', 'success'); wx.navigateBack({ delta: 1 // 1返回上一个界面，2返回上上个页面 }) }).catch(err => { }); } });
