微信小程序在一个页面中有多个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})
}
})