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. Android Studio 错误: 非法字符: '\ufeff'

    右下角:选UTF-8 convert一下,再重新编译..不知道为什么,本来好像就是UTF-8好奇怪. 还看到一个方法但我没试过,放在这里万一下次又遇见了这样的问题呢 右下角将UTF-8 convert ...

  2. Ajax级联选择框

    Ajax级联选择框 级联选择框常用与比较负责的网页开发,例如实现的商品添加页面中,需要选择商品的分类,而分类信息又有层次,例如大分类和小分类就是两层级联,在用户选择商品所属大类时,所属小类的内容需要根 ...

  3. 学用HBuilder开发App的看过来

    自己的呕心沥血之作吧,花了一年时间,系统介绍HTML5 App开发的相关技术. 越来越多的公司采用HTML5来快速开发移动跨平台App,它支持当前市场流行的移动设备. 本书主要介绍了HTML5在移动A ...

  4. 在React Native中,使用fetch网络请求 实现get 和 post

    //在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...

  5. 微信小程序没有返回按钮怎么办?微信小程序左上角返回按钮怎么调出来?

    如果你发现自己的小程序页面没有返回按钮,请检查是不是用的wx.redirectTo(OBJECT)进行的跳转,如果是那就把它改成wx.navigateTo(OBJECT)就可以了. wx.naviga ...

  6. Python—day10 函数的参数分类

    一.实参与形参 1.形参:定义函数,在括号内声明的变量名,用来接受外界传来的值 def fn(形参们):                pass def fn(a,b,c):# 形参就是考虑实参的值, ...

  7. 【Redis篇】Redis持久化方式AOF和RDB

    一.前述 持久化概念:将数据从掉电易失的内存存放到能够永久存储的设备上. Redis持久化方式RDB(Redis DB)   hdfs:    fsimageAOF(AppendOnlyFile)   ...

  8. BBS论坛(三十)

    30.显示评论和添加评论功能完成 (1)apps/models.py class CommentModel(db.Model): __tablename__='comment' id=db.Colum ...

  9. .NET Core实战项目之CMS 第五章 入门篇-Dapper的快速入门看这篇就够了

    写在前面 上篇文章我们讲了如在在实际项目开发中使用Git来进行代码的版本控制,当然介绍的都是比较常用的功能.今天我再带着大家一起熟悉下一个ORM框架Dapper,实例代码的演示编写完成后我会通过Git ...

  10. 【转】关于 python ImportError: No module named 的问题

    今天在 centos 下安装 python setup.py install 时报错:ImportError: No module named sysconfig, 当时急着用,就顺手直接源码编译了一 ...