uniapp手写滚动选择器的完整代码(时间选择器)

　　class="sleepPage-time-picker"

　　:indicator-style="indicatorStyle"

　　:value="timeValue"

　　@change="handleTimeChange"

　　>

　　v-for="(hour, index) in hours"

　　:key="index"

　　:class="[

　　'sleepPage-time-picker_item',

　　{ selected: timeValue[0] === index },

　　]"

　　>

　　{{ hour }}

　　class="sleepPage-time-picker_item-span"

　　v-if="timeValue[0] === index"

　　>时

　　>

　　v-for="(minute, index) in minutes"

　　:key="index"

　　:class="[

　　'sleepPage-time-picker_item',

　　{ selected: timeValue[1] === index },

　　]"

　　>

　　{{ minute }}

　　class="sleepPage-time-picker_item-span"

　　v-if="timeValue[1] === index"

　　>分

　　>

　　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;

　　// 这里可以处理时间选择后的逻辑，例如更新界面显示的时间

　　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;

　　}

　　}