微信小程序在一个页面中动态展示多个picker，并设置不同picker默认值，pick时能单独设定值。

最新推荐文章于 2024-09-30 09:28:09 发布

原创最新推荐文章于 2024-09-30 09:28:09 发布 · 2.4k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#微信小程序 #多个picker #动态 #循环 #默认值

微信小程序专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在微信小程序中实现多个picker组件的动态默认值设置。通过将默认值设置为数组并根据数组位置动态生成，解决了多个picker时的问题。同时提供了一个具体的实现案例。

微信小程序在一个页面中有多个picker时，且为动态生成picker默认值时，原生的picker需要设置多个index,如果把index设置成数组，并根据数组的位置，来动态生成是个好办法。

在piker中，添加新的数据属性：data-current="{{idx}}"

且把input 中 value 写成 value="{{area[areaIndex[idx]s]}}" 这样读取的就是areaindex数组中下标的位置。

<!--index.wxml-->
<view class="container">
  <view class="">
    <block wx:for="{{person}}" wx:for-item="item" wx:for-index="idx" wx:key="">
      <view class="i-for">
        <view class="i-left">姓名：{{item.name}}</view>
        <view class="i-left">姓别：{{item.sex}}</view>
      
      <view class="i-for2">
        <view class="i-left">区域选择:</view>
        <picker bindchange="bindPickerChange" value="{{areaIndex}}" data-current="{{idx}}" range="{{area}}" data-prearea="{{item.come}}">
          <view class="i-left">
            <input value="{{area[areaIndex[idx]]}}" disabled />
          </view>
        </picker>
      </view>
      </view>


    </block>

  </view>
</view>

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    area:['亚洲','欧洲','非洲','南美洲','北美洲','澳洲','南极洲'],
    person:[
      { name: '王二', sex: '男', come:'欧洲'},
      { name: 'Tom', sex: '男', come: '亚洲' },
      { name: 'Black', sex: '女', come: '非洲' },
      { name: '马拉多纳', sex: '男', come: '北美洲' },
      { name: 'cruse', sex: '男', come: '南极洲' }
    ],
    areaIndex:[]
  },

  onLoad: function () {
    var lis =[]
    var area = this.data.area;
    var person = this.data.person;
    //把areaindex转变成数组。
    for(var i =0;i<person.length;i++){
      for (var j = 0; j < area.length;j++){
        //当person中的come和area中相等时，组成新数组
        if (person[i].come === area[j]){
          lis.push(j)
        }
      } 
    }
    this.setData({ areaIndex: lis })
    console.log(this.data.areaIndex)  
  },
  bindPickerChange:function(e){
    //解决当改变一个picker时，所有picker都改变的状况。
    var curindex = e.target.dataset.current;
    var curlist = this.data.areaIndex;
    //替换原来的数组中的元素
    curlist.splice(curindex,1,e.detail.value);
    this.setData({areaIndex:curlist})
  }
})

项目源代码在此