收藏
回答

根据数据循环出来的多个picker组件如何区分他们的值?

我的表单组件均为动态生成,当一个表单出现两次以上的picker(mode="date")日期组件时,选定一个的日期后另一个也发生改变,但由于组件是循环生成的,所以代码里只写了一个bindchange,怎样才能在数量不定的情况下让他们互不影响呢?或者说如何准确获得他们同类型的索引并得到对应的值?


<!-- 选择日期 -->

<block wx:for="{{formProperties}}" wx:key="{{item}}">

<view class="date" wx:if="{{item.type=='date'}}">

  <picker mode="date" value="{{nowDate}}" bindchange="dateChange" data-index="{{index}}">

     <view class="picker">

        <view style="width:100%;border:1px solid #bbb;height:70rpx;line-height:70rpx;padding-left:20rpx;box-sizing:border-box;">

{{nowDate}}

           <image src="../images/date.png" widthFix style="width:30rpx;height:30rpx;float:right;margin-top:20rpx;margin-right:20rpx;"></image>

        </view>

     </view>

  </picker>

</view>

</block>


最后一次编辑于  10-21
回答关注问题邀请回答
收藏

2 个回答

  • Architect
    Architect
    10-21

    首先不同的picker你要使用不同的AppData才会有不同的展现形式出来,看你代码使用的都是nowDate这个值。

    1. 给循环数据formProperties增加一个date属性,默认为当前日期。并在循环出来的picker组件中应用该值:value=“{{ item.date }}”。展示同理,使用{{ item.date }}

    2. 在dateChange方法中,通过e.currentTarget.dataset.index获取不同picker的下标,并加以区分赋值。此处通过更改this.data.formProperties[index].date的值即可实现互不影响的效果。

    10-21
    赞同 1
    回复 3
    • Alice
      Alice
      10-21
      感谢您的回答,请问如何给数据增加date属性呢?在前端增加吗?我的数据是后台获取的外部接口,无法增加字段
      10-21
      回复
    • Architect
      Architect
      10-21回复Alice
      在通过后台接口获取数据后,这条数据本质上已经是你的了,可以任意操作。通过js给对象数组增加属性值即可。
      10-21
      回复
    • Architect
      Architect
      10-21回复Alice
      你也可以不操作原数据,生成一条长度和原数组数据相同的数组,存入date值即可。但要注意和原数据保持同步。
      10-21
      回复
  • 晚风
    晚风
    12-03

    请问楼主问题解决了吗

    12-03
    赞同
    回复
问题标签