微信小程序picker組件關(guān)于objectArray數(shù)據(jù)類(lèi)型的綁定方法
一、前言：
我發(fā)現(xiàn)很多的同學(xué)都在抱怨說(shuō)微信小程序的picker的mode = selector/mode = multiSelector 無(wú)法實(shí)現(xiàn)Object Array數(shù)據(jù)類(lèi)型的綁定，其實(shí)很多人就想要和html中的下拉選中的通過(guò)選中獲取vaule中的屬性值，其實(shí)認(rèn)真查看微信picker組件詳解的都知道其實(shí)是可以實(shí)現(xiàn)的，只不過(guò)微信給的實(shí)例是array的實(shí)例而object array實(shí)例是留給大家去動(dòng)手的喲，在這里我主要介紹的mode=selector 的objectArray實(shí)現(xiàn)。
二、介紹：
普通選擇器：mode = selector
| 屬性名 | 類(lèi)型 | 默認(rèn)值 | 說(shuō)明 | |
|---|---|---|---|---|
| range | Array / Object Array | [] | mode為 selector 或 multiSelector 時(shí)，range 有效 | |
| range-key | String | 當(dāng) range 是一個(gè) Object Array 時(shí)，通過(guò) range-key 來(lái)指定 Object 中 key 的值作為選擇器顯示內(nèi)容 | ||
| value | Number | 0 | value 的值表示選擇了 range 中的第幾個(gè)（下標(biāo)從 0 開(kāi)始） | |
| bindchange | EventHandle | value 改變時(shí)觸發(fā) change 事件，event.detail = {value: value} | ||
| disabled | Boolean | false | 是否禁用 |
微信picker組件詳解： https://developers.weixin.qq.com/miniprogram/dev/component/picker.html?search-key=picker
首先我的數(shù)據(jù)格式是：[{ name: '服務(wù)質(zhì)量', id: 20 }, { name: '服務(wù)品質(zhì)', id: 24 }, { name: '服務(wù)速度', id: 25}]
.wxml頁(yè)代碼：
//其中range為數(shù)據(jù)源，value為下標(biāo)索引，bindchange為change改變事件
<picker range='{{type}}' value='{{idx}}' bindchange='Change' range-key="name" data-id='{{type[index].id}}'>
<view class='picker'>{{type[index].name}}</view>
</picker>
.js代碼：
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
type: [{ name: '服務(wù)質(zhì)量', id: 20 }, { name: '服務(wù)品質(zhì)', id: 24 }, { name: '服務(wù)速度', id: 25}],
index: 0,//索引
},
Change: function (e) {
console.log('picker發(fā)送選擇改變，索引值為', e.detail.value)
console.log("選中的id值:"+e.target.dataset.id)
console.log(e);
this.setData({
index: e.detail.value
})
}
頁(yè)面效果和輸出結(jié)果：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
通過(guò)繼承IHttpHandle實(shí)現(xiàn)JS插件的組織與管理
最近，項(xiàng)目中的用到的Js插件越來(lái)越多，有的是用原生javascript寫(xiě)的，有的是調(diào)用的jquery插件，頁(yè)面上Js和Css文件的引用也越來(lái)越混亂，而且Js文件之間還有引用先后的依賴(lài)關(guān)系2010-07-07
這篇文章主要介紹了js控制表單不能輸入空格的小例子，有需要的朋友可以參考一下2013-11-11
JS封裝通過(guò)className獲取元素的函數(shù)示例
這篇文章主要介紹了JS封裝通過(guò)className獲取元素的函數(shù),涉及javascript針對(duì)頁(yè)面元素屬性的遍歷與數(shù)組相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
本篇文章主要是對(duì)JavaScript中的枚舉功能進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
JavaScript如何動(dòng)態(tài)創(chuàng)建table表格
這篇文章主要介紹了JavaScript如何動(dòng)態(tài)創(chuàng)建table表格，一些時(shí)候需要?jiǎng)討B(tài)的創(chuàng)建和刪除表格，接下來(lái)的文章中將為大家介紹下javascript是如何做到的，感興趣的朋友不要錯(cuò)過(guò)2015-11-11
javaScript給元素添加多個(gè)class的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇javaScript給元素添加多個(gè)class的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
使用swiper自定義分頁(yè)點(diǎn)擊跳轉(zhuǎn)指定頁(yè)面
這篇文章主要介紹了使用swiper自定義分頁(yè)點(diǎn)擊跳轉(zhuǎn)指定頁(yè)面方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
VS Code轉(zhuǎn)換大小寫(xiě)、修改選中文字或代碼顏色的方法
最近在使用VS Code，發(fā)現(xiàn)了不少使用的小技巧，覺(jué)著有必要給大家分享下，下面這篇文章主要給大家介紹了關(guān)于VS Code轉(zhuǎn)換大小寫(xiě)、修改選中文字或代碼顏色的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-12-12
vscode工具函數(shù)idGenerator使用深度解析
這篇文章主要為大家介紹了vscode工具函數(shù)idGenerator使用深度解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這是個(gè)人在最近使用json時(shí)做的總結(jié)，拿出來(lái)給沒(méi)接觸過(guò)的小弟們曬曬，適用與沒(méi)接觸過(guò)json的人員，其中json2。js請(qǐng)到j(luò)son官網(wǎng)下載。2010-03-03