微信小程序选择器picker的range和range-key的用法

最新推荐文章于 2022-08-19 18:34:13 发布
最新推荐文章于 2022-08-19 18:34:13 发布
阅读量852 收藏 2
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DJxyyy/article/details/109456077
版权
本文介绍了微信小程序中picker组件使用对象数组objectArray时，range和range-key的详细用法。通过定义对象数组、获取数据、bindChange事件及在wxml中设置属性来实现选择器的功能。
摘要由CSDN通过智能技术生成

微信小程序选择器picker的range和range-key的用法

概述
最近在学习微信小程序中发现，官网中对选择器picker控件的range存放的是对象数组objectArray的用法描述的不是很详细，经过一番研究对picker控件的range和range-key的用法简单坐下总结，以供参考。
picker的range和range-key的用法

这里只是对range中存放对象数组objectArray的讲解，至于range中存放数组array的情况官网API给的非常详细在这里我就不过多描述了，想了解的请参考https://developers.weixin.qq.com/miniprogram/dev/component/picker.html。

在这里插入图片描述

1、在js文件中定义对象数组和下标

在这里插入图片描述

最低0.47元/天 解锁文章
何故沾衣欲湿杏花雨
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序picker的range和range-key的用法注意
AsBefore麦小兜
09-02 3万+
通常，我们在获取后台的数据字典要显示在页面的picker中，如上图所示， 但后台传过来的参数是以数组格式传过来的数据，里面是多项json结构的数据， 在picker中显示的只是每项json结构数据中的某一项，但需要给后台传的数据却是另一项， 例如：后台给我的数据是myAnnual这个数组，我在picker上显示的是每一项数据里面的label这项，但要给后台传的参数却是value这一项。 ...
微信小程序多列选择器range-key使用详解
08-29
（1）微信小程序多列选择器的使用方法：微信小程序多列选择器可以通过range-key属性来指定选择器的范围。在本文中，我们将详细介绍如何使用range-key属性来实现多列选择器的功能。 （2）微信小程序多列选择器的实例...
小程序组件之picker和range-key的用法
azhu3020的博客
11-03 488
因为在微信小程序的官网上并没有range-key的例子以及实际用法，所以好多人不知道具体如何使用。然后我在这里对其进行一个简单的实现，并记录一些注意事项。 以下是官网给的说明： 具体的用法： WXML： 1 <picker mode="selector" value="{{index}}" range="{{objectArray}}" b...
微信小程序开发----Picker中range属性及其他的理解
专注写bug
12-11 4412
微信小程序开发文档中针对picker做了详细的解释，但根据笔者的使用，发现了一个好玩的地方。 先针对picker 普通选择器：mode = selector这个模式说下属性吧 上图是微信小程序官方文档的说明，以下是我的自己理解： range属性，类型为array或者object Array，他的作用只是让你当前使用的picker指明调用哪一个数据，如下，我有两个数组的...
微信小程序选择器picker中range-key的用法
weixin_43923808的博客
08-19 2144
【代码】微信小程序选择器picker中range-key的用法。
微信小程序（二）picker为对象数组，设置range-key，并获取对象id
jonssonyan
05-01 1122
js Page({ data: { categorys: [ { id: 10, name: '美国' }, { id: 11, name: '中国' }, { id: 12,
微信小程序picker的range和range-key用法
Thirst1的博客
03-02 1664
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
微信小程序多列选择器之range-key
03-29
微信小程序多列选择器之range-keypicker mode="multiSelector" bindchange=...微信小程序多列选择器之range-key <picker mode="multiSelector" bindchange="bindMultiPickerChange2" bindcolumnchan
微信小程序实现的picker多级联动功能示例
10-16
在微信小程序中，Picker组件常用于创建用户选择项的交互，尤其在实现多级联动功能时，能够提供分层选择的用户体验。本示例详细解析了如何利用Picker组件和wx.request进行后台数据交互来实现多级联动效果。 首先，...
微信小程序自定义多列选择器使用详解
12-11
微信小程序在自带的表单组件中加入了选择器picker，并给出了常用的时间和省市区三级联动选择器，但日常开发中不可能仅仅使用这些选择器，所以我们在学习时先写一个常见的自定义选择器，用于满足项目中的日常需要。...
当range是Object Array时，picker 中range-key中的值必须带单引号
qq_31150171的博客
04-12 3044
如：&lt;picker bindchange="bindPickerChange" range-key="{{'name'}}" value="{{objectArray[index].id}}" range="{{objectArray}}" class='merchant_type_picker' name='merchant_type' &gt;          &lt;view&gt;
qt给qdialog加一个滚动条_这些小程序技巧，你敢说你一个用不到？
weixin_39617497的博客
11-20 290
都是小技巧，废话不多说，上代码！改变小程序原生组件大小微信官方提供了一些基本组件，但是有的组件没有提供类似size的属性，我们只需要一个css就可以解决,以radio为例：小程序picker组件的range-key不生效小程序picker使用过程中发现按官方文档写完，提示列表渲染为[Object Object]，先看文档：使用场景为如果传入组件是对象数组，你需要设置range-key来设置显示该数...
findwindow获取托盘区图标程序的句柄_小程序开发讲义【入门篇】 03
weixin_39593593的博客
11-20 141
小程序开发讲义【入门篇】- 03小程序组件表单组件按钮组件属性说明size：有效取值default,minitype：按钮样式primary,default,warnplain：按钮是否镂空，背景色透明，默认否disabled：是否禁用，默认否loading：名称前是否带loading图标，默认否form-type：有效值submit,reset，点击分别触发对应事件hover-clas...
小程序系列之4组件picker（滚动选择器）
实干兴邦
04-19 944
 第一：picker       从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。普通选择器：mode = selector属性名类型默认值说明最低版本rangeArray / Object Array[]mode为 selector 或 multiSelector 时，range 有效 range...
微信小程序picker的range和range-key的用法
jolieLi2019888的博客
10-29 1415
最近项目中使用了picker组件，需要将后台返回的数据显示在picker中，如下图所示： 而后端返回数据以数组格式传过来，里面是多项json结构的数据，在picker中显示的只是每项json结构数据中的某一项。 这时候，就要用到range\color{red}{range}range和range−key\color{red}{range-key}range−key这两个参数。 range 是你要显示的数组 range-key 是数组中你要显示的那一项， ⚠️ 注意的是 range="array\c
微信小程序多项选择器_微信小程序中range-key多列选择器的使用示例
weixin_39594191的博客
12-19 348
这篇文章主要为大家详细介绍了微信小程序多列选择器range-key的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序多列选择器的具体代码，供大家参考，具体内容如下 当前选择：{{objectMultiArray[0][multiIndex2[0]].name}}，{{objectMultiArray[1][multiIndex2[1]].name}}...
picker里range为对象数组，设置range-key
泊一的博客
05-01 1870
html <view class="form-item"> <text class="title">选择课程</text> <picker mode="selector" name="course_id" @change="bindCourseChange" :value="courseInd...
怎么使用微信小程序vant 组件Picker 选择器怎么搭配弹出层使用
最新发布
06-09
使用vant组件库中的Picker选择器可以结合Popup弹出层组件使用，可以在弹出层中放置Picker选择器，从而达到在弹出层中选择数据的效果。 具体步骤如下： 1. 引入vant组件库和相关样式文件。 2. 使用Popup组件包裹...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值