微信小程序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 ...
随机推荐
- django(models)视图与html 简单的操作
!数据提前写好 urls映射图 点击a标签之后
- MS-UAP发布的UWP的个人隐私策略
我们十分重视您的隐私.本隐私声明解释了我们从您那里收集的个人数据内容以及我们将如何使用这些数据. 我们不收集任何与个人信息相关的数据,只收集与本UWP运行相关的数据,如: 产品使用数据:如每个页面的使 ...
- js 生成随机炫彩背景
在浏览 https://ghost.org/xxxx/ 时. 可以使用 background-size: cover; 加上很小的像素图,放大后实现炫彩背景效果. 使用 js canvas 随机生成小 ...
- [Swift]LeetCode210. 课程表 II | Course Schedule II
There are a total of n courses you have to take, labeled from 0 to n-1. Some courses may have prereq ...
- [Swift]LeetCode481. 神奇字符串 | Magical String
A magical string S consists of only '1' and '2' and obeys the following rules: The string S is magic ...
- 002-J2EE-tomcat的配置
在配置之前我们要先下载一个Tomcat,登入以下网址... 下载解压完了之后可以把里面多余的东西删掉,当然也可以选择不删. 还有这里的也是 如果已经有了 classes 和l ib 目录了, 就不用再 ...
- python之Django学习笔记(一)---搭建Django开发环境和一些基本命令
1.Django下载 官方下载地址:https://www.djangoproject.com/download/ 2.Django安装 linux/windows安装方法相同,具体有以下俩种 pip ...
- redis 系列8 数据结构之整数集合
一.概述 整数集合(intset)是集合键的底层实现之一, 当一个集合只包含整数值元素,并且这个集合元素数量不多时, Redis就会使用整数集合作为集合键的底层实现.下面创建一个只包含5个元素的集合键 ...
- Python爬虫入门教程 22-100 CSDN学院课程数据抓取
1. CSDN学院课程数据-写在前面 今天又要抓取一个网站了,选择恐惧症使得我不知道该拿谁下手,找来找去,算了,还是抓取CSDN学院吧,CSDN学院的网站为 https://edu.csdn.net/ ...
- vue的基本操作
vue的基本概念 挂载点:就是el属性对应html中的节点,实例只会处理挂载点下的内容. 模版:在挂载点内部的内容,也可以将模版内容卸载实例里面 如果有template属性会用模版替换外部html ...