vue 上下滑动选择小时
时间: 2023-10-01 15:09:28 浏览: 37
你可以使用 Vue 的滚动事件来检测用户的滚动行为,然后根据滚动位置来动态计算并更新所选小时。
下面是一个简单的示例代码:
```html
<template>
<div class="hour-selector" @scroll="handleScroll">
<div v-for="hour in hours" :key="hour" :class="{ 'selected': hour === selectedHour }">{{ hour }}</div>
</div>
</template>
<script>
export default {
data() {
return {
hours: [...Array(24).keys()],
selectedHour: null,
};
},
methods: {
handleScroll(event) {
const scrollTop = event.target.scrollTop;
const selectedIndex = Math.round(scrollTop / 30); // 每个小时的高度为 30px
this.selectedHour = this.hours[selectedIndex];
},
},
};
</script>
<style>
.hour-selector {
height: 150px;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.hour-selector > div {
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
cursor: pointer;
}
.hour-selector > .selected {
background-color: #ccc;
}
</style>
```
这个示例代码实现了一个简单的小时选择器,用户可以通过滚动来选择想要的小时数。每个小时用一个 `<div>` 元素表示,当用户选中某个小时时,该小时的背景色会变为灰色。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)