小程序之picker 数据是 Object Array

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

视图层

<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: ["中文", '数学', "音乐"]

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

小程序之picker 数据是 Object Array作者:知了清语

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

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

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

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

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

小程序之picker 数据是 Object Array

我们在 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的详细内容,更多请关注立业阁其它相关文章!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服![email protected] 2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励! 3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负! 4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!

立业阁 微信小程序教程 小程序之picker 数据是 Object Array https://www.liyege.cn/xcxzpsjso.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘
查看详情

相关文章