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

摘要:
在使用微信小程序picker组件时候,可以设置属性mode=multiSelector意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变。后边得2表示为,最终选中得为第二列数据中索引为2对应的值arrColumn0和arrColumn1,是我定义得数组,可以从后台直接获取,但是一定要在picker组件弹出来之前,附上值。PickerColumnChange函数,当每一列改变时候都会触发这个函数,

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

结构文件

<picker mode="multiSelector" bindchange="PickerChange" bindcolumnchange="PickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
  <view class="picker">
	{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}}
    </view>
</picker>

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

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

range 为绑定数组

js文件

data: {
	multiArray: [['飞禽', '走兽'], ['鹰', '鸽子', '麻雀', '鹦鹉']],
	multiIndex: [0, 0],
	arrColumn0: ['鹰', '鸽子', '麻雀', '鹦鹉'],
	arrColumn1: ['兔子', '狮子', '猎狗']
},
PickerChange(e) {
	var value = e.detail.value
	this.setData({
		multiIndex: value
	})
	console.log(this.data.multiArray[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.arrColumn1
	}
	this.setData({
		multiArray: multiArray
	})
},

设计思路

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

multiIndex 为最终选中得数据索引,是函数 PickerChange 参数 e 里面包含得数组
e.detail.value 有两列,即会返回 [1,2] , 前面得 1 表示为,最终选择第一列得数组中索引为 1 对应的那个值。后边得 2 表示为,最终选中得为第二列数据中索引为 2 对应的值

arrColumn0 和 arrColumn1,是我定义得数组,可以从后台直接获取,但是一定要在 picker 组件弹出来之前,附上值。 multiArray 同理也可以这样赋值。

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

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

免责声明:文章转载自《微信小程序picker组件两列关联使用方式》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇pgpool-II主备流复制的架设UI自动化自动验证登录滑动拼图验证码下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

微信小程序嵌套h5页面,h5页面返回小程序,小程序和h5的页面和交互方法,h5点击分享小程序页面

相信大家在做小程序的时候有些需求会需要嵌套h5页面正常的h5页面嵌套很简单就是一个web-view然后放入h5链接就可以了 <web-view src="http://www.google.cn?id=1&type=2"/> 如果当前的h5页面需要分享直接点击分享是不能调用微信小程序分享的但是可以点击后跳转到小程序页面从小程序的方法中...

微信小程序单向数据流解决

1. 小程序中没有vue中v-model一样的双向数据机制,并且小程序也不像vue那样的进行 实时的数据驱动视图. 小程序页面数据加载完成后再去改变data中的数据页面是 不会有变化的. 2. 解决: 使用小程序提供的特定方法, 该方法会触发框架本身再次对页面进行渲染 this.setDate()方法的使用如下:...

微信小程序生成带参数的二维码(小程序码)独家asp.net的服务端c#完整代码

一)我先用的小程序端的wx.request去调用API,发现竟然是一个坑! wx.request({ url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + token, method: "POST", responseTy...

微信小程序 云开发中部分用户获取不到unionId

在微信小程序 云开发中,部分用户无法获取到unionId ,但是有的用户可以获取到 上面这个用户通过手机号登录获取到UnionId的,没有获取的在result中没有uninid, 因为公司业务是以手机号来区分用户的,并没有着重与unionid ,所以能不能获取到无所谓,但是我我纳闷为啥有的可以获取到,有的无法获取到。 后来看了微信官方的技术文档,知道了为什...

微信小程序支付源码,后台服务端代码

作者:尹华南,来自原文地址 微信小程序支付绕坑指南 步骤 A:小程序向服务端发送商品详情、金额、openid B:服务端向微信统一下单 C:服务器收到返回信息二次签名发回给小程序 D:小程序发起支付 E:服务端收到回调 首先准备以一下信息 小程序发送小程序向服务端发送商品详情、金额、openid 服务端接收小程序发来的信息...

记录uniapp的APP端分享到微信好友,链接为小程序页面,分享失败的BUG

记录uni-app的APP端分享到微信好友,链接为小程序页面,分享失败的BUG 分享到微信好友,链接为小程序端报错 16:59:19.617 fail:{"errMsg":"share:fail [Share微信分享:-6]send, http://ask.dcloud.net.cn/article/287","errCode":-100,"code":-...