微信小程式picker元件關於objectArray資料型別的繫結方法
一、前言:
我發現很多的同學都在抱怨說微信小程式的picker的mode = selector/mode = multiSelector 無法實現Object Array資料型別的繫結,其實很多人就想要和html中的下拉選中的通過選中獲取vaule中的屬性值,其實認真檢視微信picker元件詳解的都知道其實是可以實現的,只不過微信給的例項是array的例項而object array例項是留給大家去動手的喲,在這裡我主要介紹的mode=selector 的objectArray實現。
二、介紹:
普通選擇器:mode = selector
屬性名 | 型別 | 預設值 | 說明 | |
---|---|---|---|---|
range | Array / Object Array | [] | mode為 selector 或 multiSelector 時,range 有效 | |
range-key | String | 當 range 是一個 Object Array 時,通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內容 | ||
value | Number | 0 | value 的值表示選擇了 range 中的第幾個(下標從 0 開始) | |
bindchange | EventHandle | value 改變時觸發 change 事件,event.detail = {value: value} | ||
disabled | Boolean | false | 是否禁用 | |
微信picker元件詳解: https://developers.weixin.qq.com/miniprogram/dev/component/picker.html?search-key=picker
首先我的資料格式是:[{ name: '服務質量', id: 20 }, { name: '服務品質', id: 24 }, { name: '服務速度', id: 25}]
.wxml頁程式碼:
//其中range為資料來源,value為下標索引,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程式碼:
/** * 頁面的初始資料 */ 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 }) }
頁面效果和輸出結果: