首页vue 上下滑动选择小时

vue 上下滑动选择小时

时间: 2023-10-01 20:09:28 浏览: 87

你可以使用 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>` 元素表示，当用户选中某个小时时，该小时的背景色会变为灰色。

阅读全文