发布：2023/12/7 15:51:16作者：大数据 来源：大数据 浏览次数：534
微信小程序在实际需求中可能需要实现添加多个input组件下拉列表，一般具有相同的属性view，如上图，添加行、删除行，进行多行添加。主要应用在实时动态添加多个相同组件或添加多个input或列表等。比如：选修课时添加课程、课时，可以是添加多行相同数据。
具体小程序代码附后。像这样的多行数据一般用json数组对象存储类似这样[{},{}]，存储到表中某条记录某个字段里即可。
首先在js中的data里定义一个对象数组；
|
1 2 3 |
data: { dataRowList: [{categoryName:'',specificationName:'',quantity:0}], }, |
wxml文件:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<view class="weui-cells__title flex-row"> <view class=""><i>*</i>类别</view> <view class=""><i>*</i>规格</view> <view class=""><i>*</i>配量</view> </view> <block wx:for="{{dataRowList}}" wx:key="index"> <view class="flex-row"> <view class="weui-cells weui-cells_after-title"> <view class="weui-cell"> <view class="weui-cell__bd"> <picker data-rownum="{{index}}" bindchange="bindCategoryChange" value="{{index}}" range="{{categoryList}}" range-key="categoryName"> <view class="picker"> <input name="categoryName" disabled="true" class="weui-input" placeholder="选择类别" value="{{ dataRowList[index].categoryName}}" /> </view> </picker> </view> </view> </view> <view class="weui-cells weui-cells_after-title"> <view class="weui-cell pl0"> <view class="weui-cell__bd"> <picker data-rownum="{{index}}" bindchange="bindSpecificationChange" value="{{index}}" range="{{specificationList}}" range-key="specificationName"> <view class="picker"> <input name="specificationName" disabled="true" class="weui-input" placeholder="选择规格" value="{{dataRowList[index].specificationName}}" /> </view> </picker> </view> </view> </view> <view class="weui-cells weui-cells_after-title"> <view class="weui-cell pl0"> <view class="weui-cell__bd"> <input data-rownum="{{index}}" bindchange="bindQantityChange" type="number" name="quantity" class="weui-input" placeholder="输入配量" value="" /> </view> </view> </view> </view> </block> <view style="display: flex;flex-direction: row;text-align: center;"> <view style="flex: 1;"><button class="btn-success weui-btn_mini" bindtap="onAddRow">添加行</button></view> <view style="flex: 1;"><button class="btn-primary weui-btn_mini" bindtap="onRemoveRow">删除行</button></view> </view> |
js绑定事件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
bindCategoryChange: function (e) { //console.log('picker发送选择改变，携带值为', e) var rownum=e.currentTarget.dataset.rownum; var datalist=this.data.dataRowList; datalist[rownum].categoryName=this.data.categoryList[e.detail.value].categoryName; this.setData({ dataRowList:datalist, }) }, onAddRow: function (e) { console.log(this.data.dataRowList) var datalist=this.data.dataRowList; datalist.push({categoryName:'',specificationName:'',quantity:0}); this.setData({ dataRowList:datalist }) }, onRemoveRow: function (e) { //console.log(this.data.dataRowList) var datalist=this.data.dataRowList; if(datalist.length>1) datalist.pop(datalist.length); this.setData({ dataRowList:datalist }) }, |
form提交时将json对象转换为字符串即可。
|
1 2 |
//灭火器json字符串 formdata.fireExtinguisher=JSON.stringify(this.data.dataRowList); |
以上仅是部分示例代码，大家可以参考此思路实现。
微信小程序 子控件不响应父
因为：
bind事件绑定不会阻止冒泡事件向上冒泡
catch事件绑定可以阻止冒泡事件向上冒泡
当点击子集的catchtap='navmap'事件之后阻止冒泡事件向上冒泡，所以不会触发bindtap='carState'，成功解决bug,实现小程序中点击子元素事件而不触发父元素的点击事件。
小程序提交表单后刷新当前页面，小程序重新清除当前表单数据，
在提交成功操作后面用以下任一种方法：
一、使用this.setdata()或that.setdata重新初始化数据
|
1 2 3 4 5 6 7 8 |
setTimeout(function(){ // 提交成功设置为初始值 that.setData({ value: 0, name: '', mobile: '' }) },1500) |
或直接：
|
1 |
that.setData({shopName: '',}) |
二、使用导航重新定位到当前页：
|
1 2 3 |
wx.navigateTo({ url: '../client_shop_input/client_shop_input', }) |
三、使用reset按钮重置表单
|
1 |
<button class="btn-primary" form-type="reset">确定提交</button> |
这个需要手动点击按钮。
