需求描述:
通过请求后端接口,动态获取表单的数据源(json格式,数组),使用小程序wx:for循环遍历,对接口返回的数组中的一个字段存为picker组件选择器,并允许用户进行选择修改该值。
问题描述:
在使用wx:for循环时,picker选择器修改值操作如果直接使用this.setData({index:e.detail.value})的方式进行修改保存,使用这种方式就会出现picker选择器渲染完毕后,对其中的某个选择器的值进行修改,相对应的,所有使用wx:for循环遍历出的picker选择器的值均会修改(原因:picker选择器共用value所影响)
解决方案:
对后台返回的数据进行处理,在后台返回的数组中每一项添加当前picker选择器修改后的值,picker选择器选项字段,在循环所有picker选择器时,通过给picker选择器绑定不同的索引,通过索引去监听哪个picker选择器的值进行改变,进行改变后的picker选择器记录对应改变的值后,重新赋值即解决动态生成picker选择器后修改值相互影响问题。
注:如果是下拉框的情况下,后台返回的数据请用一个固定的键来保存下拉框的里面的json数组,比如selectList
wxml文件:
<!-- wxml -->
<form bindsubmit="formSubmit">
<view wx:for='{
{formTemplate}}' wx:key='{
{indx}}' wx:for-index="idx">
<view >
<view>
<text>状态类型:</text>
<

文章讲述了在微信小程序中,如何避免使用`this.setData`直接修改picker组件值导致的其他同名picker选器同步修改的问题,提出在后台处理数据并为每个picker绑定独特索引来隔离值的解决方案。
最低0.47元/天 解锁文章
1682

被折叠的 条评论
为什么被折叠?



