本篇經(jīng)驗將繼續(xù)分享表單類組件中picker滾動選擇器之時間選擇器組件的使用詳解。經(jīng)驗基于第一個手工構(gòu)建的微信小程序演示，具體構(gòu)建步驟，可參考如下經(jīng)驗引用。 查詢官方文檔并設(shè)置屬性 1. 先百度搜索

本篇經(jīng)驗將繼續(xù)分享表單類組件中picker滾動選擇器之時間選擇器組件的使用詳解。經(jīng)驗基于第一個手工構(gòu)建的微信小程序演示，具體構(gòu)建步驟，可參考如下經(jīng)驗引用。

查詢官方文檔并設(shè)置屬性

1. 先百度搜索查看picker滾動選擇器組件的官方文檔，通過設(shè)置其mode屬性的值可使用不同的滾動選擇器，不同的選擇器除了公共屬性外，還會有一些特殊屬性。本篇經(jīng)驗分享時間選擇器的相關(guān)內(nèi)容（即mode'time'）。

在wxml文件中創(chuàng)建選擇器

2. 在wxml文件中，通過picker標(biāo)簽創(chuàng)建一個多列選擇器，相關(guān)操作如下：

1. 設(shè)置mode屬性的值為'time'，即時間選擇器；
2. 使用動態(tài)綁定的方式設(shè)置選擇器的value屬性，即當(dāng)前值；
3. start和end屬性設(shè)置選擇器可選擇的時間范圍；
4. bindchange屬性可綁定選擇器改變后的回調(diào)函數(shù)。

在js文件中定義變量和回調(diào)函數(shù)

3. 在js文件中定義上面數(shù)據(jù)綁定所使用的變量，以及bindchange屬性綁定的回調(diào)函數(shù)。

在wxss文件中定義樣式

4. 在wxss文件中聲明wxml中組件所使用的類的樣式定義。

查看效果和觸發(fā)回調(diào)函數(shù)

5. 保存編譯后，在模擬器中查看頁面效果，符合預(yù)期。點擊選擇器，彈出滾動選擇區(qū)域，當(dāng)超出設(shè)置的時間范圍后，會自動回彈；確認(rèn)選擇一個時間后，會觸發(fā)bindchange綁定的回調(diào)函數(shù)。