微信小程序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 ...
随机推荐
- unittest测试套件
测试套件就是测试集,测试集是测试用例的集合. a.按用例顺序执行(addtest) 当addtest与unittest的测试规则冲突时,仍然按照ASCII码的顺序执行. import unittest ...
- Luogu P1381油滴扩展
传送门 数据范围给的很小啊,n >= 0 && n <= 7,所以给了DFS生存的空间. 对于每一个油滴,可以说在它下一个油滴放置之前,当前的这个油滴的半径并不确定(但是对 ...
- 初学Java的那段日子
最近因为一个朋友想要学习Java,在帮助他找教程的过程中回想到了我自己当年学习Java的那段岁月,故写了此篇文章总结了一下初学Java所必须要掌握的知识点,然后把一部分常见的面试题罗列出来.给予刚刚开 ...
- [Swift]LeetCode705. 设计哈希集合 | Design HashSet
Design a HashSet without using any built-in hash table libraries. To be specific, your design should ...
- [Swift]LeetCode725. 分隔链表 | Split Linked List in Parts
Given a (singly) linked list with head node root, write a function to split the linked list into k c ...
- [Swift]LeetCode753. 破解保险箱 | Cracking the Safe
There is a box protected by a password. The password is n digits, where each letter can be one of th ...
- android 缩放平移自定义View 显示图片
1.背景 现在app中,图片预览功能肯定是少不了的,用户基本已经形成条件反射,看到小图,点击看大图,看到大图两个手指开始进行放大,放大后,开始移动到指定部位~~~ 我相信看图的整个步骤,大家或者说用户 ...
- Java核心技术及面试指南的视频讲解和代码下载位置
都是百度云盘,均无密码 代码下载位置: https://pan.baidu.com/s/1I44ob0vygMxvmj2BoNioAQ 视频讲解位置: https://pan.baidu.com/s/ ...
- C/C++读写二进制文件
C++读写二进制文件 最近在给android层提供支持,因此代码都是用标准库库函数写出来的,好多windows和第三方的库不能或者很难使用,下面有我在读写二进制文件时候的一些心得,也算是一种总结吧 1 ...
- Java 技术笔记
vlist提取字段生成新list List<int> uidList = urResult.stream().map(p -> p.getUserId()).collect(Coll ...