js文件:

 Companyarr: [{
id: '公司id1',
companyname: "公司1的名字"
}, {
id: '公司id2',
companyname: "公司2的名字"
}],
  Companyindex: 0,
 

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的坑的更多相关文章

  1. 我的微信小程序入门踩坑之旅

    前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...

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

    在使用微信小程序picker组件时候,可以设置属性   mode = multiSelector   意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变.但是官方文档上给的只 ...

  3. 微信小程序picker组件关于objectArray数据类型绑定

    一.前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无法实现Object Array数据类型的绑定,其实很多人就想 ...

  4. 微信小程序开发填坑指南V1

    近期用了一星期的时间,开发了一个小程序.小程序名称是:小特Jarvis,取自钢铁侠的管家. 后台采用C#编写,WebAPI接口.其实开发时间并不多,小程序本身提供的API,相比公众号的API来说,已经 ...

  5. 微信小程序开发踩坑日记

    2017.12.29  踩坑记录 引用图片名称不要使用中文,尽量使用中文命名,IDE中图片显示无异样,手机上图片可能出现不显示的情况. 2018.1.5  踩坑记录 微信小程序设置元素满屏,横向直接w ...

  6. 微信小程序——picker通过value返回你想获取的值

    关于微信小程序中的picker使用方法可以访问:picker-小程序 从它的官方文档中,可以看出它返回的value值是它range的下标: 在项目中,我们大多数时候传的值并不是需要这个下标,而是其他的 ...

  7. 微信小程序从入坑到放弃之坑十二:navigator无法跳转的坑

    转自:http://www.yilingsj.com/xwzj/2018-11-25/weixin-miniprogram-navigator.html 微信小程序中的页面跳转用navigator就行 ...

  8. 微信小程序开发踩坑记

    前言 微信小程序自去年公测以来,我司也申请了一个帐号开发,春节前后开始开发,现在终于告一个段落了.谨以此文记录下踩过的坑. 坑1:scroll-view与onPullDownRefresh冲突 由于有 ...

  9. 微信小程序的那些坑

    早闻微信小程序是个坑,结果名不虚传,细数一下我开发小程序遇过到坑. 1.UI组件过度封装. 微信小程序的组件是模仿react.js或vue.js的web组件设计的,并且封装了weui.css样式. P ...

随机推荐

  1. COCOMOII的使用说明

    if(airline.equals("欧美")) { result="所有座位都有食物供应,每个座位都可以播放电影"; } if(airline.equals( ...

  2. 神经网络_线性神经网络 1 (Nerual Network_Linear Nerual Network 1)

    2019-04-08 16:59:23 1 学习规则(Learning Rule) 1.1 赫布学习规则(Hebb Learning Rule) 1949年,Hebb提出了关于神经网络学习机理的“突触 ...

  3. vue本地项目设置通过手机访问

    最近再用vue写一个移动端的应用,想通过手机访问看看页面效果,于是有了下文. 1.shif+右键打开命令行工具,输入ipconfig,回车,得到电脑的ip 2.找到工作目录下的config文件夹中的i ...

  4. 基于Java的HashMap和HashSet实现

    一.Map接口类: import java.util.Iterator; public interface IMap<K, V> { /* 清除所有键值对 */ void clear(); ...

  5. Centos7 Nginx开机启动

    1.简易安装nginx: ./configure --sbin-path=/usr/local/nginx/nginx --conf-path=/usr/local/nginx/nginx.conf ...

  6. [Swift]LeetCode397. 整数替换 | Integer Replacement

    Given a positive integer n and you can do operations as follow: If n is even, replace n with n/2. If ...

  7. [Swift]LeetCode423. 从英文中重建数字 | Reconstruct Original Digits from English

    Given a non-empty string containing an out-of-order English representation of digits 0-9, output the ...

  8. 面试官:说说一条查询sql的执行流程和底层原理?

    一条查询SQL执行流程图如下 序章 自我介绍 我是一条sql,就是一条长长的字符串,不要问我长什么样,因为我比较傲娇. 额~~不是我不说啊,因为细说起来,我可以细分为DML(Update.Insert ...

  9. 12.Git分支-推送(push)、跟踪分支、拉取(pull)、删除远程分支

    1.推送 本地的分支并不会自动与远程仓库同步,你可以显示的向远程仓库推送你的分支.例如你在本地创建了一个dev分支,你想其他的人和你一样在dev之下进行工作,可以使用 git push <rem ...

  10. 今天俺要说一说简单工厂模式(Simple Factory)

    前言:简单工厂不能说是设计模式,它是一种变成习惯,因为它不是23种设计模式之一,但是它在实际开发中经常用到,而且也非常简单,可以说是工厂模式的一个引导. 大多程序员都是单身狗,为了弥补一下你们的心情, ...