---

沒(méi)有符合項(xiàng)目要求的選擇器 就手寫(xiě)了一個(gè)

效果展示

實(shí)現(xiàn)一個(gè)時(shí)間選擇器的功能，可以選擇小時(shí)和分鐘：

HTML/Template部分：

<picker-viewclass="sleepPage-time-picker":indicator-style="indicatorStyle":value="timeValue"@change="handleTimeChange"
><!-- 第一列：小時(shí)選擇 --><picker-view-column><viewv-for="(hour, index) in hours":key="index":class="['sleepPage-time-picker_item',{ selected: timeValue[0] === index },]">{{ hour }}<spanclass="sleepPage-time-picker_item-span"v-if="timeValue[0] === index">時(shí)</span></view></picker-view-column><!-- 第二列：分鐘選擇 --><picker-view-column><viewv-for="(minute, index) in minutes":key="index":class="['sleepPage-time-picker_item',{ selected: timeValue[1] === index },]">{{ minute }}<spanclass="sleepPage-time-picker_item-span"v-if="timeValue[1] === index">分</span></view></picker-view-column>
</picker-view>

• <picker-view> 是一個(gè)小程序中的組件，用于實(shí)現(xiàn)滾動(dòng)選擇器效果。
• :indicator-style 和 :value 是組件的屬性綁定，分別用來(lái)設(shè)置選擇器的樣式和當(dāng)前選擇的值。
• @change 是一個(gè)事件監(jiān)聽(tīng)器，當(dāng)選擇器的值發(fā)生改變時(shí)會(huì)觸發(fā) handleTimeChange 方法。

JavaScript部分：

data() {return {timeValue: [0, 0],  // 默認(rèn)選中的時(shí)間值，[小時(shí)索引, 分鐘索引]indicatorStyle: "height: 30px;background: rgba(237, 252, 249, 1);z-index: 0;",hours: [...Array(24).keys()].map((n) => n.toString().padStart(2, "0")),  // 生成小時(shí)選項(xiàng)數(shù)組minutes: [...Array(60).keys()].map((n) => n.toString().padStart(2, "0")),  // 生成分鐘選項(xiàng)數(shù)組};
},
methods: {handleTimeChange(e) {this.timeValue = e.detail.value;  // 更新選擇的時(shí)間值// 處理選擇后的邏輯，例如更新界面顯示的時(shí)間console.log("Selected Time:",this.hours[this.timeValue[0]],":",this.minutes[this.timeValue[1]]);},
}

• data() 中定義了組件的數(shù)據(jù)狀態(tài)，包括 timeValue 表示當(dāng)前選擇的小時(shí)和分鐘的索引，hours 和 minutes 分別是小時(shí)和分鐘的選項(xiàng)數(shù)組。
• handleTimeChange(e) 方法是一個(gè)事件處理器，用來(lái)響應(yīng)選擇器數(shù)值改變事件。它更新 timeValue 并可以執(zhí)行相應(yīng)的邏輯，例如打印或更新界面上顯示的選擇結(jié)果。

CSS部分：

.sleepPage-time-picker-box {display: flex;margin-bottom: 10px;
}
.sleepPage-time-picker {height: 90px;  /* 設(shè)置選擇器的高度 */width: 50%;  /* 設(shè)置選擇器的寬度 */margin: 2px;
}
.selected {color: rgba(40, 184, 129, 1);  /* 設(shè)置選中項(xiàng)的文字顏色 */
}
.sleepPage-time-picker_item {text-align: center;height: 30px;line-height: 30px;position: relative;
}
.sleepPage-time-picker_item-span {padding-left: 10px;position: absolute;right: 15px;
}

• CSS 部分定義了選擇器和其子元素的樣式，包括選擇器的整體布局和每個(gè)選項(xiàng)的樣式，以及選中項(xiàng)的特殊樣式。

完整代碼

     <picker-viewclass="sleepPage-time-picker":indicator-style="indicatorStyle":value="timeValue"@change="handleTimeChange"><picker-view-column><viewv-for="(hour, index) in hours":key="index":class="['sleepPage-time-picker_item',{ selected: timeValue[0] === index },]">{{ hour }}<spanclass="sleepPage-time-picker_item-span"v-if="timeValue[0] === index">時(shí)</span></view></picker-view-column><picker-view-column><viewv-for="(minute, index) in minutes":key="index":class="['sleepPage-time-picker_item',{ selected: timeValue[1] === index },]">{{ minute }}<spanclass="sleepPage-time-picker_item-span"v-if="timeValue[1] === index">分</span></view></picker-view-column></picker-view>timeValue: [0, 0],indicatorStyle:"height: 30px;background: rgba(237, 252, 249, 1);z-index: 0;",hours: [...Array(24).keys()].map((n) => n.toString().padStart(2, "0")),minutes: [...Array(60).keys()].map((n) => n.toString().padStart(2, "0")),handleTimeChange(e) {this.timeValue = e.detail.value;// 這里可以處理時(shí)間選擇后的邏輯，例如更新界面顯示的時(shí)間console.log("Selected Time:",this.hours[this.timeValue[0]],":",this.minutes[this.timeValue[1]]);},.sleepPage-time-picker-box {display: flex;margin-bottom: 10px;.sleepPage-time-picker {// height: 300px;height: 90px;width: 50%;margin: 2px;}.selected {color: rgba(40, 184, 129, 1);}.sleepPage-time-picker_item {text-align: center;height: 30px;line-height: 30px;position: relative;}.sleepPage-time-picker_item-span {padding-left: 10px;position: absolute;right: 15px;}}

您好，我是肥晨。
歡迎關(guān)注我獲取前端學(xué)習(xí)資源，日常分享技術(shù)變革，生存法則；行業(yè)內(nèi)幕，洞察先機(jī)。