温州四都乡小程序之picker 数据是 Object Array
阅读 24078 · 发布日期 2020-08-24 17:26 · 温州优光网络科技有限公司|建站|APP小程序制作|做网站SEO推广优化
【摘要】
我们在操作 picker 组件的时候 可能会有疑惑,为什么会出现渲染问题,或者我就是想取中文的值,怎么办?视图层数据是json的,直接展示
picker使用说明:{{school}}'
model:value="{{currentSchool}}"
bindchange="handleChange"... 【温州小程序开发,温州微信公众号,平阳做网站,平阳网站建设公司,平阳小程序商城制作,昆阳万全做网站,鳌江水头小程序,萧江腾蛟微信公众号,山门顺溪南雁海西南麂凤卧麻步怀溪网络网店服务,政采云网店管理服务】...
我们在操作 picker 组件的时候 可能会有疑惑,为什么会出现渲染问题,或者我就是想取中文的值,怎么办?视图层
{
school}
}
'
model:value="{
{
currentSchool}
}
" bindchange="handleChange" > 当前选择 {
{
school[currentSchool].valuess}
}
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 再取值总结不想去写bindchange更改 data数据,就使用 model:picker 开始标签和结束标签 中包裹只是选择以后的内容,你可以随意去组织用 text呈现或者 {
{
内容}
}
呈现 或者 view 呈现 或者 input 呈现 都可以获取Object Array中的其他字段,如果不想过滤数据,就使用 Object Array这种结构,就通过索引下班去访问,不需要在data中建2个字段只有点击 picker中显示的 【确定】按钮,picker中的数据才会更新推荐教程:
《微信小程序》以上就是小程序之picker 数据是 Object Array的详细内容,更多请关注php中文网其它相关文章!
微信
分享相关标签:
微信小程序本文转载于:
掘金社区,如有侵犯,请联系a@php.cn删除
上一篇:
一款小而美小程序脚手架,让你更流畅快速的开发小程序
下一篇:
小程序入门就看这篇相关文章相关视频微信小程序图片无法显示怎么办?自学微信小程序从零到一:
项目构建后http请求封装微信小程序-canvas生成图片并保存到本地怎么退出微信小程序的登录?小程序之picker 数据是 Object Arr...初识微信小程序(1)初识微信小程序(4)深入了解微信小程序(三) [温州做小程序]