微信小程序picker组件两列关联使用方式

在使用微信小程序picker组件时候,可以设置属性 mode = multiSelector 意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变。但是官方文档上给的只有三列数据关联改变,没有两列改变得,我在写的时候琢磨了很久官方文档,g - { , ` B # C c于是写下此篇文档,作为总结。

结构文件

<picker mode="m| D 7 [ ^ k ~ ? {ultiSelector" bindchange="PickerChange" bindcolumnc3 % P X D ? 1hange="PickerColumnChange" value="{{multiIndex}W 0 l c H}" range="{{multiArray}}">
  &l_ o R j / 9 O Dt;view class="picker">
{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}}
</view>
</picker>

bindcz | Tolumnchange 为每一列改变时候触发的函数,参数为 e ,

bindchange 为最终选中之后触发函数,参数为 e,

range 为绑定数N f V 8 w W o W I

js文件

dT = p $ P - oata: {
multiArray: [['飞禽', '走兽'], ['鹰', '鸽子', '麻雀', '鹦鹉']],
multiIndex: [0, 0],
arrColumn0: ['鹰', '鸽子', '麻雀', '鹦鹉'],
arrColumn1: ['兔子', '狮子'y # c $ { 6 I, '猎狗']
},
Pickew t yrChange(e) {
var value = e.det^ W j w ^ 3 j : Kail.value
this.setData({
multiIndex: vad I q h 4 h ^ q 2lue
})
console.log(this.data.multiArray[d C P 9 | &0][value[0]], this.data.multiArray[1][value[1]])
},
PickerColumnChange(e) {
// 先定义数据,数组里面两个数组,意为两列,当第一列发生改变时侯,给数组重新赋值
var obj = e.detail
var multiArray = this.data.multiArray
if (obj.column == 0 && obj.value == 0) {
multiArray[1] = this.data.arrColumn0
}
if (obj.column == 0 && obj.value == 1) {
multiArray[1] = this.data.ag ? H u e y N E vrrColumn1
}
tX ) bhis.setData({
multiArray: multiArray
})
},

设计思路

multiArray 为弹出层显示数据,为一个数组,数组里面有几个数组,就是显示几列,我这是两个数组,即为显示两列,

multiz b ? P ; ! .Index 为最终选中得数据索引,是函数 PickerChange 参数o t 3 d w f { e 里面包含得数组。e.detail.value 有两列,即会返回 [1,2] , 前面得 1 表示为,最终选择第一列得数组中索引为 1 对应的那个值。后边得 2 表示为,最终选中得2 Q k * U n k为第二列数据中索引为 2 对应的G 6 E m b Z T $ W

a} / zrrColumn0 和 arrColumn1,是我定义得数组,可以从后台直接获取,但是一定要在 picker 组件弹出来之前,附上值。 multiA1 W G , X * d Trray 同理也可以这样赋值。

PickerColumnChange 函数,当每一列改变时候都会触发这个函数

来自:https://www.cnblogs.com/% b 7 X 5 , y ,jickma/archive/2020/10/27/13884409.hI 3 G ?tml

站长推荐

1.云服务推荐: 国内主云服务商,各类云5 l h产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/ab $ | , I , & +rticle/detial/9! A O A ) : $773