vue 上下滑动选择小时
时间: 2023-09-23 14:02:25 浏览: 33
你可以使用 Vue.js 和一些 JavaScript 库来实现上下滑动选择小时的功能。这里提供一种简单的实现方法:
1. 首先,你需要引入一个 JavaScript 库,如 `hammer.js` ,用于检测手势事件。
2. 在 Vue 组件中,定义一个变量 `hour` 用于保存当前选择的小时数。
3. 在组件的 `mounted()` 生命周期钩子中,使用 `hammer.js` 监听 `pan` 事件,当用户向上或向下滑动时,更新 `hour` 变量的值。
下面是一个简单的实现代码示例:
```html
<template>
<div class="hour-selector">
<div class="hour">{{ hour }}</div>
</div>
</template>
<script>
import Hammer from 'hammerjs';
export default {
data() {
return {
hour: 0,
};
},
mounted() {
const el = this.$el.querySelector('.hour');
const mc = new Hammer.Manager(el);
mc.add(new Hammer.Pan({ direction: Hammer.DIRECTION_VERTICAL }));
mc.on('pan', (ev) => {
this.hour -= Math.round(ev.deltaY / 10);
if (this.hour < 0) this.hour = 23;
if (this.hour > 23) this.hour = 0;
});
},
};
</script>
<style>
.hour-selector {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.hour {
font-size: 72px;
font-weight: bold;
text-align: center;
user-select: none;
}
</style>
```
在这个示例中,我们将 `.hour` 元素作为手势检测的目标,然后监听 `pan` 事件,并根据手势的滑动距离更新 `hour` 变量的值。你可以根据实际需求修改样式和手势检测的参数。