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

2022-03-31 07:08:01 字數 1064 閱讀 7488

picker元件時乙個從底部彈起的可滾動的選擇器(嵌入頁面滾動器元件picker-view檢視支援5種選擇器 :

普通選擇器、多列、時間、日期和省市區 , 通過mode區分 , 預設是普通選擇器 (分別對應的mode值為selector,multiselector,time,date和region)

例如 :

那怎麼來實現乙個普通的選擇器呢

當前選擇:}

bindchange 是value改變時觸發的事件 , 通過event.detail.value獲取當前列表索引

value value 的值表示選擇了 range 中的第幾個(下標從 0 開始)

range 繫結的是乙個陣列型別的資料

選擇器觸發事件

bindpickerchange: function(e) )

}

需要在data中定義乙個陣列和下標

data:
接下來 ,我們通過從後台介面動態獲取資料新增到選擇器,先看效果圖

檢視元件

商戶名稱

}

當我們的資料是乙個陣列物件時,需要用到range-key這個屬性 , 通過它來指定陣列物件中要顯示的資料

例如result陣列物件形式如下

"result":
我們想要指定mchname來作為顯示器顯示內容

range-key='mchname'

定義陣列mchlist和下標index ,從第乙個開始

data: ,
選擇器觸發事件 更新index當前下標

bindpickerchange: function (e) )

},

微信小程式 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

使用姿勢 獲取 尾巴之前ui丟了一張類似這樣的效果圖 當然這個是本文的效果圖,不是原圖,不過差不多 給我 當時看到圖就想這個還不簡單,直接使用picker就行了。然後就是一頓操作,選擇mode為date,最終出現了效果圖 正當我沉浸在完成功能的喜悅中的時候,心裡有個聲音一直在提醒我 你沒有達到ui需...