uniapp实现添加可以上下滑动的闹钟设定

### UniApp实现上下滚动闹钟设置功能 为了实现在UniApp中通过上下滑动来设定闹钟的功能，可以参考`Way of Life`应用的设计思路[^1]。具体来说，可以通过自定义组件的方式创建一个类似于时间选择器的效果。以下是详细的代码示例： #### 自定义组件 `swiperTime.vue` 这是一个用于展示时间和处理用户交互的时间选择器组件。 ```vue <template> <view class="container"> <scroll-view scroll-y :style="{ height: containerHeight + 'px' }" @touchend="onTouchEnd"> <block v-for="(item, index) in timeList" :key="index"> <view class="time-item" :class="{ active: item.active }" @click="selectItem(index)"> {{ formatTime(item.time) }} </view> </block> </scroll-view> </view> </template> <script> export default { props: { timeAllS: { type: Array, required: true }, containerHeight: { type: Number, default: 300 } }, data() { return { timeList: [], selectedIdx: null }; }, created() { this.initTimeList(); }, methods: { initTimeList() { const list = []; for (let i = 0; i < this.timeAllS.length; i++) { list.push({ ...this.timeAllS[i], active: false }); } this.timeList = list; }, selectItem(idx) { this.timeList.forEach((item, index) => { item.active = index === idx; }); this.selectedIdx = idx; this.$emit('selActive', { idx: this.selectedIdx, tag: 1 }); }, onTouchEnd() { if (this.selectedIdx !== null) { this.selectItem(this.selectedIdx); } }, formatTime(time) { return `${String(time.getHours()).padStart(2, '0')}:${String( time.getMinutes() ).padStart(2, '0')}`; } } }; </script> <style scoped> .container { width: 100%; } .time-item { text-align: center; padding: 10px 0; font-size: 18px; } .time-item.active { background-color: #f0f0f0; color: blue; } </style> ``` --- #### 主页面 `main.vue` 这是主页面的逻辑部分，负责初始化数据并监听子组件事件。 ```vue <template> <view class="page-container"> <swiperTime ref="swiperTime" :timeAllS="timeAllS" @selActive="handleSelect"></swiperTime> <text>已选时间：{{ time }}</text> </view> </template> <script> import swiperTime from './components/swiperTime'; export default { components: { swiperTime }, data() { return { timeAllS: [], // 时间列表 starTime: '', endTime: '', choseTime: {}, time: '' }; }, onLoad() { setTimeout(() => { this.getTimez(); }, 1000); }, methods: { handleSelect(e) { let idx = e.idx; e.tag == 1 ? (this.starTime = this.timeAllS[idx].time) : (this.endTime = this.timeAllS[idx + 1].time); this.choseTime = { starTime: this.timeAllS[idx], endTime: this.timeAllS[idx + 1] }; this.time = this.formatTime(this.starTime) + '~' + this.formatTime(this.endTime); }, getTimez() { const times = []; const startHour = new Date().getHours(); for (let hour = startHour; hour < startHour + 24; hour++) { for (let minute = 0; minute < 60; minute += 5) { const date = new Date(); date.setHours(hour % 24); date.setMinutes(minute); times.push({ time: date, active: false }); } } this.timeAllS = times; const initialTimes = this.$refs.swiperTime.getimeChose(); this.choseTime = initialTimes; this.starTime = initialTimes.starTime.time; this.endTime = initialTimes.endTime.time; this.time = this.formatTime(this.starTime) + '~' + this.formatTime(this.endTime); }, formatTime(date) { return ( String(date.getHours()).padStart(2, '0') + ':' + String(date.getMinutes()).padStart(2, '0') ); } } }; </script> <style scoped> .page-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } </style> ``` --- ### 关键点说明 1. **滚动区域设计** 使用了`scroll-view`组件，并设置了`scroll-y`属性以支持垂直方向的滚动效果[^1]。 2. **动态时间生成** 在`getTimez()`方法中，动态生成了一天内的每五分钟时间段的数据集合[^4]。 3. **父子组件通信** 子组件`swiperTime`通过`@selActive`事件向父组件传递当前选中的索引和标签信息，从而更新显示的时间范围[^4]。 4. **样式优化** 对于被选中的时间项，添加了高亮样式以便用户直观区分当前选定的时间段。 ---