小程序之picker 数据是 Object Array

我们在操作 picker 组件的时候 可能会有疑惑，为什么会出现渲染问题，或者我就是想取中文的值，怎么办？

视图层

 view 数据是json的，直接展示 /view 
picker使用说明：
 picker 
 mode= selector 
 range-key= valuess 
 range= #39;{{school}} #39; 
 model:value= {{currentSchool}} 
 bindchange= handleChange 
 当前选择 {{school[currentSchool].valuess}}
 /picker 

逻辑层

page({
 data: {
 school: [
 { isNewRecord :false, id : 2 , keyss : school , valuess : 湖南小学 },
 { isNewRecord :false, id : 3 , keyss : school , valuess : 北京小学 }
 currentSchool: 
 handleChange(e) {
 console.log(e)
 // 如果 range是一个 Object Array形式的，那这里的value就是索引下标
 let currentVal = e.detail.value
 // 对应的中文是
 let text = this.data.school[currentVal].valuess
 console.log( #39;中文-- #39;, text)
})

这里，我们传入的是一个数组对象 Object Array类型， 那么我们在使用picker组件的时候，一定要分清，这些字段的意思，以及如何取值

range-key 是告诉我们，在渲染的时候，是以什么字段取值，下面就是不指定的情况，如果是很简单的数据结构

类似： school: ["中文", 数学 , "音乐"]

是不需要指定的，对于复杂的数据结构，指定字段，微信会自动帮我们去赋值

作者：知了清语

model:value="{{currentSchool}}" 你可能会发现这个，为什么value前面绑定了model

因为微信不是双向数据绑定的，如果单纯的写 value="{{当前选中的索引下标-currentSchool}}"

逻辑层的currentSchool 是不会有变化的，必须通过 bindchange事件去修改 data中的数据, 像下面这样

handleChange(e) {
 this.setData({
 currentSchool: e.detail.value
}

使用model的好处 就在于 我们不需要关系这个赋值操作，只要我们点击右上角的确定，data中的 currentSchool就更新了，点击取消是不会更新data中的数据的

我们在 handleChange中的 e.detail.value 拿到的值也就是个下标，其实我们可能会想要text文本

就直接像上面那样，用索引去取源数据中的 {} 对象属性

还有一种常见的操作，就是将 school--schoolFilter变成 ["湖南小学", "北京小学"] 这种简单结构，那么e.detail.value 获取的就是中文

但是这种要求，data中有2个数组 schoolFilter--Array类型的 和school--Object Array类型的， picker中用 range = "{{schoolFilter}}"

那么要获取源数据的其他属性，就必须遍历school 再取值

总结

不想去写bindchange更改 data数据，就使用 model:

picker 开始标签和结束标签 中包裹只是选择以后的内容，你可以随意去组织用 text呈现或者 {{内容}}呈现  或者 view 呈现 或者 input 呈现 都可以

获取Object Array中的其他字段，如果不想过滤数据，就使用 Object Array这种结构，就通过索引下班去访问，不需要在data中建2个字段

只有点击 picker中显示的 【确定】按钮，picker中的数据才会更新

推荐教程：《微信小程序》

以上就是小程序之picker 数据是 Object Array的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。