微信网站开发价格,江苏省建设厅网站,网站制作的步骤,国外著名的网站设计公司需求描述#xff1a;
通过请求后端接口#xff0c;动态获取表单的数据源#xff08;json格式#xff0c;数组#xff09;#xff0c;使用小程序wx:for循环遍历#xff0c;对接口返回的数组中的一个字段存为picker组件选择器#xff0c;并允许用户进行选择修改该值。
…需求描述
通过请求后端接口动态获取表单的数据源json格式数组使用小程序wx:for循环遍历对接口返回的数组中的一个字段存为picker组件选择器并允许用户进行选择修改该值。
问题描述 在使用wx:for循环时picker选择器修改值操作如果直接使用this.setData({index:e.detail.value})的方式进行修改保存使用这种方式就会出现picker选择器渲染完毕后对其中的某个选择器的值进行修改相对应的所有使用wxfor循环遍历出的picker选择器的值均会修改原因picker选择器共用value所影响
解决方案 对后台返回的数据进行处理在后台返回的数组中每一项添加当前picker选择器修改后的值picker选择器选项字段在循环所有picker选择器时通过给picker选择器绑定不同的索引通过索引去监听哪个picker选择器的值进行改变进行改变后的picker选择器记录对应改变的值后重新赋值即解决动态生成picker选择器后修改值相互影响问题。
注如果是下拉框的情况下后台返回的数据请用一个固定的键来保存下拉框的里面的json数组比如selectList
wxml文件
!-- wxml --
form bindsubmitformSubmitview wx:for{{formTemplate}} wx:key{{indx}} wx:for-indexidxview viewtext状态类型/text/viewviewpicker bindchangebindPickerChange data-index{{idx}} range{{item.array}}input placeholder请选择 disabled value{{item.value}}/input/picker/view/view/viewview classbottombtnbutton classbluebtn form-typesubmit 提交保存/button/view
/form
{{formTemplate}}是后台接口返回的模板列表对象
{{item.value}} 是列表对象里面虚拟出来的一个字段你可以自己随便定义所以默认肯定为空
js文件:
//下拉框切换事件bindPickerChange(e) {let value e.detail.value;let index e.currentTarget.dataset.index;this.setData({[formTemplate[index].fieldValue]:this.data.formTemplate[index].selectList[value]})},
/*** 切换时间选择框* param {*} e */bindDateChange: function (e) {let value e.detail.value;let index e.currentTarget.dataset.index;this.setData({[formTemplate[index].fieldValue]:value})},
其他比如时间选择器同理都可以按这个方式动态修改
