成都网站建设设计

将想法与焦点和您一起共享

微信小程序picker组件中如何绑定objectArray数据类型

这篇文章主要为大家展示了“微信小程序picker组件中如何绑定objectArray数据类型”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序picker组件中如何绑定objectArray数据类型”这篇文章吧。

成都创新互联公司是专业的织金网站建设公司,织金接单;提供成都网站设计、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行织金网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

介绍:

 普通选择器:mode = selector

属性名类型默认值说明
rangeArray / Object Array[]mode为 selector 或 multiSelector 时,range 有效
range-keyString
当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valueNumber0value 的值表示选择了 range 中的第几个(下标从 0 开始)
bindchangeEventHandle
value 改变时触发 change 事件,event.detail = {value: value}
disabledBooleanfalse是否禁用

首先我的数据格式是:[{ name: '服务质量', id: 20 }, { name: '服务品质', id: 24 }, { name: '服务速度', id: 25}]

.wxml页代码:

//其中range为数据源,value为下标索引,bindchange为change改变事件

{{type[index].name}}

.js代码:

/**
  * 页面的初始数据
  */
 data: {
  type: [{ name: '服务质量', id: 20 }, { name: '服务品质', id: 24 }, { name: '服务速度', id: 25}],
  index: 0,//索引
 },
 Change: function (e) {

  console.log('picker发送选择改变,索引值为', e.detail.value)
  console.log("选中的id值:"+e.target.dataset.id)
  console.log(e);
  this.setData({

   index: e.detail.value

  })

 }

页面效果和输出结果:

微信小程序picker组件中如何绑定objectArray数据类型

微信小程序picker组件中如何绑定objectArray数据类型

以上是“微信小程序picker组件中如何绑定objectArray数据类型”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站名称:微信小程序picker组件中如何绑定objectArray数据类型
网址分享:http://chengdu.cdxwcx.cn/article/ggjssj.html