85 lines
2.4 KiB
Vue
85 lines
2.4 KiB
Vue
<template>
|
|
<view class="time-picker">
|
|
<scroll-view scroll-y="true" :scroll-into-view="minuteIntoView" scroll-with-animation="true" class="scroll-view">
|
|
<view
|
|
v-for="(minute, index) in minutes"
|
|
:key="index"
|
|
:id="'minute-' + index"
|
|
:class="['minute-item', { selected: selectedMinute === index - 1}]"
|
|
@click="selectMinute(index - 1)"
|
|
>
|
|
{{selectedMinute === index - 1 ? formatNumber(minute) + '分' : formatNumber(minute)}}
|
|
</view>
|
|
</scroll-view>
|
|
<scroll-view scroll-y="true" :scroll-into-view="secondIntoView" scroll-with-animation="true" class="scroll-view">
|
|
<view
|
|
v-for="(second, index) in seconds"
|
|
:key="index"
|
|
:id="'second-' + index"
|
|
:class="['second-item', { selected: selectedSecond === index - 1}]"
|
|
@click="selectSecond(index - 1)"
|
|
>
|
|
{{ selectedSecond === index - 1 ? formatNumber(second) + '秒' : formatNumber(second) }}
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
minutes: Array.from({ length: 60 }, (_, i) => i),
|
|
seconds: Array.from({ length: 60 }, (_, i) => i),
|
|
selectedMinute: 0,
|
|
selectedSecond: 0,
|
|
minuteIntoView: 'minute-0',
|
|
secondIntoView: 'second-0'
|
|
};
|
|
},
|
|
methods: {
|
|
formatNumber(num) {
|
|
return num < 10 ? '0' + num : num;
|
|
},
|
|
selectMinute(index) {
|
|
this.selectedMinute = index;
|
|
this.minuteIntoView = 'minute-' + index;
|
|
this.$emit('change-minute', this.selectedMinute);
|
|
},
|
|
selectSecond(index) {
|
|
this.selectedSecond = index;
|
|
this.secondIntoView = 'second-' + index;
|
|
this.$emit('change-second', this.selectedSecond);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.time-picker {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 350rpx;
|
|
width: 590rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
}
|
|
.selected {
|
|
font-size: 44rpx;
|
|
color: #3D3D3D;
|
|
font-weight: 600;
|
|
}
|
|
.scroll-view {
|
|
width: 260rpx;
|
|
height: 140px; /* Adjust height as needed */
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.minute-item, .second-item {
|
|
height: 50px; /* Adjust height as needed */
|
|
line-height: 50px;
|
|
text-align: center;
|
|
border-bottom: 1px solid rgba(80,86,90, .1);
|
|
}
|
|
</style> |