视图层
<view>数据是json的,直接展示</view> picker使用说明: <picker mode=selector range-key=valuess range='{{school}}' 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('中文-->', 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}}
总结
不想去写bindchange更改 data数据,就使用 model:
picker 开始标签和结束标签 中包裹只是选择以后的内容,你可以随意去组织用 text呈现或者 {{内容}}呈现 或者 view 呈现 或者 input 呈现 都可以
获取Object Array中的其他字段,如果不想过滤数据,就使用 Object Array这种结构,就通过索引下班去访问,不需要在data中建2个字段
只有点击 picker中显示的 【确定】按钮,picker中的数据才会更新
推荐教程:《微信小程序》