微信小程序picker的坑
js文件:
Companyarr: [{
id: '公司id1',
companyname: "公司1的名字"
}, {
id: '公司id2',
companyname: "公司2的名字"
}],
wxml文件:
<form bindsubmit='bindformSubmit'> <text class="input-item-label">所属公司</text>
<picker name='UserCompany' class="input-item-content" bindchange="bindPickerChange" data-pickername="UserCompany" value="{{Companyindex}}" range-key='{{"companyname"}}' range="{{Companyarr}}" mode="selector">{{Companyarr[Companyindex].companyname}}
</picker>
<button class="btn-block btn-orange" formType="submit">申请认证</button> </form>
1.当range是ObjectArray时,range-key的作用是通过 range-key 来指定 Object 中 key 的值作为选择器显示内容。此时rang-key注意:大括号里面一定要加引号,也可以用range-key='companyname' 这种形式。
PS:rang-key就是指定在页面上要显示对象数组中那个属性的值,和后面的{{Companyarr[Companyindex].companyname}}对应
2.关于value值得问题
官方文档:
解释value是数组的索引,按照上面的写法(正确的写法就是这种),当我们提交表单,通过e.detail得到的表单的值,UserCompany对应的值就是你所选项的数组索引值,在大多数情况下,这并不是我们想要的,我们一般要得到的是对象数组中某个属性的值,当然通过索引,也可以在获得到我们想要的值,但是能不能在提交表单的时候,直接获得我们想要的值呢,答案是可以的(但是会有一些问题),上述例子中比如我们要得到的是id,那么我们直接给value绑定{{Companyarr[Companyindex].id}},这样通过e.detail我们获取UserCompany值就是我们想要的id值。如果我们只是一次性操作,之后也不会对信息进行更改这样是没用任何问题的,但是我想一般情况下应该不会是这样,当我们选择之后要重新选择,或者表单提交之后,要修改信息进行重新选择,那么你会发现bug了,就是当点击出现选项后,你会发现选项中默认选中的不是我们当前选择的这个,比如我们原来选择的是“公司2的名字”,跳出的选项默认选择还是“公司1的名字”,这就是没有指定选项索引的原因。如果按照正确的写法,页面加载时我们会给picker的value找到正确的索引值,进行赋值操作,这样当点击选择框弹出的框就会某人选中我们当前选择的值。
直接保存我们指定的某个属性的值,通过value指定的话,总体来说可行,但是就是会出现上述的问题。但是微信为什么不给一个属性用来专门指定索引值,而用value保存我们需要的东西呢。想不通,还是我没发现怎么弄呢????
微信小程序picker的坑的更多相关文章
- 我的微信小程序入门踩坑之旅
前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...
- 微信小程序picker组件两列关联使用方式
在使用微信小程序picker组件时候,可以设置属性 mode = multiSelector 意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变.但是官方文档上给的只 ...
- 微信小程序picker组件关于objectArray数据类型绑定
一.前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无法实现Object Array数据类型的绑定,其实很多人就想 ...
- 微信小程序开发填坑指南V1
近期用了一星期的时间,开发了一个小程序.小程序名称是:小特Jarvis,取自钢铁侠的管家. 后台采用C#编写,WebAPI接口.其实开发时间并不多,小程序本身提供的API,相比公众号的API来说,已经 ...
- 微信小程序开发踩坑日记
2017.12.29 踩坑记录 引用图片名称不要使用中文,尽量使用中文命名,IDE中图片显示无异样,手机上图片可能出现不显示的情况. 2018.1.5 踩坑记录 微信小程序设置元素满屏,横向直接w ...
- 微信小程序——picker通过value返回你想获取的值
关于微信小程序中的picker使用方法可以访问:picker-小程序 从它的官方文档中,可以看出它返回的value值是它range的下标: 在项目中,我们大多数时候传的值并不是需要这个下标,而是其他的 ...
- 微信小程序从入坑到放弃之坑十二:navigator无法跳转的坑
转自:http://www.yilingsj.com/xwzj/2018-11-25/weixin-miniprogram-navigator.html 微信小程序中的页面跳转用navigator就行 ...
- 微信小程序开发踩坑记
前言 微信小程序自去年公测以来,我司也申请了一个帐号开发,春节前后开始开发,现在终于告一个段落了.谨以此文记录下踩过的坑. 坑1:scroll-view与onPullDownRefresh冲突 由于有 ...
- 微信小程序的那些坑
早闻微信小程序是个坑,结果名不虚传,细数一下我开发小程序遇过到坑. 1.UI组件过度封装. 微信小程序的组件是模仿react.js或vue.js的web组件设计的,并且封装了weui.css样式. P ...
随机推荐
- LeetCode编程训练 - 位运算(Bit Manipulation)
位运算基础 说到与(&).或(|).非(~).异或(^).位移等位运算,就得说到位运算的各种奇淫巧技,下面分运算符说明. 1. 与(&) 计算式 a&b,a.b各位中同为 1 ...
- 《Android插件化开发指南》面世
本书在京东购买地址:https://item.jd.com/31178047689.html 本书Q群:389329264 (一)这是一本什么书 如果只把本书当作纯粹介绍Android插件化技术的书籍 ...
- rz快速上传文件到ssh服务器
[root@k8s01 ~]# rz --helprz version 0.12.20Usage: rz [options] [filename.if.xmodem]Receive files wit ...
- react-native模拟机调试步骤详解 ——亲测有效!!!!
步骤 1 下载安装夜神模拟器,去夜神官网下载即可!然后安装完成!进入到初始化项目的目录,打开cmd命令,运行adb connect 127.0.0.1:62001 链接模拟器 2 链接完成之后,运行安 ...
- [Swift]LeetCode39. 组合总和 | Combination Sum
Given a set of candidate numbers (candidates) (without duplicates) and a target number (target), fin ...
- [SQL]LeetCode627. 交换工资 | Swap Salary
SQL架构 create table ), sex ), salary int) Truncate table salary insert into salary (id, name, sex, sa ...
- AI - TensorFlow - 起步(Start)
01 - 基本的神经网络结构 输入端--->神经网络(黑盒)--->输出端 输入层:负责接收信息 隐藏层:对输入信息的加工处理 输出层:计算机对这个输入信息的认知 每一层点开都有它相应的内 ...
- Python档案袋(函数与函数装饰器 )
特点:代码复用.可扩展.保持一致性 函数简单的实现,返回值的不同: #定义方法 def funx1(): pass def funx2(): return 0 def funx3(): return ...
- React 中的key值
在react中必须要有key值,key不是用来提升react的性能的,react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key p ...
- VirtualBox虚拟机克隆迁移步骤
VirtualBox是常用的虚拟机管理软件,和VMware一样,用的很多.在使用过程中,有的时候需要对虚拟机进行迁移.比如我们原来的服务器,使用的win10操作系统,上面利用VirtualBox安装了 ...