微信小程式之picker元件(多列選擇器)

2021-09-05 10:19:43 字數 889 閱讀 9057

1、 需求:省市選擇器。

原生的省市區(mode=region)選擇器只能獲取漢字,不能定製每個省市的id,另外區選擇器實際專案中沒有使用到,思考下後選擇手動修改多列選擇器(mode=multiselector)實現功能。

實現原理:multiarray是二維陣列,省資料儲存在二維陣列第0個中,市資料切換放入二維資料第1個中,根據multiindex確定選擇項。

資料:省市是靜態資料儲存在config,資料格式下圖

[]},

]}]

wxml:

},}

首先在onload中獲取資料塞在picker元件中

async onload()
之後監聽bindmultipickercolumnchange列change事件,滾動第一列更改第二列資料

bindmultipickercolumnchange: function(e) ;

data.multiindex[e.detail.column] = e.detail.value;

switch (e.detail.column)

this.multiarray = this.data.multiarray;

this.multiindex = this.data.multiindex;

}

選擇省市後獲取選擇選項,所有資料都儲存在multiarray中

bindmultipickerchange: function(e) 

this.multiindex = e.detail.value;

}

微信小程式 picker

本文章主要解釋乙個mode為selector,平常比較常用的一些固定的選擇,我們平常就這樣子寫了,picker bindchange bindcaspickerchangestatusemployee value range name employeestatus text 在職資訊 text te...

小程式picker標題 微信小程式之picker

下面來介紹小picker,分三種樣式 預設的自己可以定義資料的 mode time 是時間選擇器 mode date 是日期選擇器 跟其他的一樣先來看下picker.wxml picker 選擇器地區選擇器 當前選擇 時間選擇器 當前選擇 日期選擇器 當前選擇 picker.wxss page ba...

微信小程式開發之picker選擇器元件用法

picker元件時乙個從底部彈起的可滾動的選擇器 嵌入頁面滾動器元件picker view檢視支援5種選擇器 普通選擇器 多列 時間 日期和省市區 通過mode區分 預設是普通選擇器 分別對應的mode值為selector,multiselector,time,date和region 例如 那怎麼來...