微信小程序picker 数据是Object Array的方法总结 |
您所在的位置:网站首页 › 小程序picker › 微信小程序picker 数据是Object Array的方法总结 |
春哥团队小程序教学:让你明明白白学知识,有代码,有讲解,抄的走,学的会!今天我们来学习一下小程序开发之picker组件。 我们在操作 picker 组件的时候 可能会有疑惑,为什么会出现渲染问题,或者我就是想取中文的值,怎么办? 视图层 数据是json的,直接展示 picker使用说明: 当前选择 {{school[currentSchool].valuess}} 复制代码逻辑层 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('中文-->', 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 再取值 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |