|
|
@@ -1,119 +1,119 @@
|
|
|
<script setup>
|
|
|
-import { onBeforeUnmount, onMounted, ref } from 'vue'
|
|
|
-
|
|
|
-// 自定义数据列表，可自行修改里面的元素
|
|
|
-const customData = ref(['苹果', '香蕉', '橙子', '葡萄', '西瓜'])
|
|
|
-
|
|
|
-// 用于存储随机生成的数据
|
|
|
-const randomData = ref('')
|
|
|
-const itemHeight = 20
|
|
|
-// 存储自定义列中每个元素的DOM引用
|
|
|
-const customItemRefs = ref([])
|
|
|
-// 存储随机列中每个元素的DOM引用
|
|
|
-const randomItemRefs = ref([])
|
|
|
-
|
|
|
-// 设置自定义列元素的DOM引用
|
|
|
-function setCustomItemRef(el) {
|
|
|
- if (el) {
|
|
|
- customItemRefs.value.push(el)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 设置随机列元素的DOM引用
|
|
|
-function setRandomItemRef(el) {
|
|
|
- if (el) {
|
|
|
- randomItemRefs.value.push(el)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 模拟老虎机转动的函数
|
|
|
-function startSpin() {
|
|
|
- let startTime // 记录转动开始时间，用于计算已过去的时间
|
|
|
- const spinDuration = 2000 // 转动持续时间（毫秒）
|
|
|
- // 每个滚动项的高度（px），与样式中.slot-item 的 height 对应
|
|
|
- const totalItems = customData.value.length // 总数据项数量
|
|
|
- const updateRandomData = () => {
|
|
|
- const randomIndex = Math.floor(Math.random() * totalItems)
|
|
|
- randomData.value = customData.value[randomIndex]
|
|
|
- }
|
|
|
-
|
|
|
- const animate = (timestamp) => {
|
|
|
- if (!startTime) {
|
|
|
- startTime = timestamp
|
|
|
- }
|
|
|
- const elapsedTime = timestamp - startTime
|
|
|
- if (elapsedTime < spinDuration) {
|
|
|
- // 移动每个随机列和自定义列的元素，实现滚动效果
|
|
|
- moveItems(randomItemRefs.value)
|
|
|
- moveItems(customItemRefs.value)
|
|
|
- requestAnimationFrame(animate)
|
|
|
- }
|
|
|
- else {
|
|
|
- // 重置随机列和自定义列元素的偏移量，使其停止在最终位置
|
|
|
- resetItems(randomItemRefs.value)
|
|
|
- resetItems(customItemRefs.value)
|
|
|
- // 可以在这里添加停止转动后的逻辑，比如判断是否中奖等
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- requestAnimationFrame(animate)
|
|
|
-}
|
|
|
-
|
|
|
-// 移动元素的通用函数，同时强制触发重排
|
|
|
-function moveItems(itemRefs) {
|
|
|
- itemRefs.forEach((el) => {
|
|
|
- const currentOffset = Number.parseInt(el.style.transform?.split(' ')[5] || '0')
|
|
|
- const newOffset = currentOffset - itemHeight
|
|
|
- el.style.transform = `translateY(${newOffset}px)`
|
|
|
- // 强制触发重排，让样式变化及时生效
|
|
|
- void el.offsetHeight
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 重置元素偏移量的通用函数
|
|
|
-function resetItems(itemRefs) {
|
|
|
- itemRefs.forEach((el) => {
|
|
|
- el.style.transform = 'translateY(0)'
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 在组件挂载时初始化相关操作
|
|
|
-onMounted(() => {
|
|
|
- // 为自定义列和随机列的每个元素设置初始的transform样式，使其处于起始位置
|
|
|
- const initItems = (refs) => {
|
|
|
- refs.forEach((el) => {
|
|
|
- el.style.transform = 'translateY(0)'
|
|
|
- })
|
|
|
- }
|
|
|
- initItems(customItemRefs.value)
|
|
|
- initItems(randomItemRefs.value)
|
|
|
-})
|
|
|
-
|
|
|
-// 在组件卸载前清除相关定时器等资源
|
|
|
-onBeforeUnmount(() => {
|
|
|
- // 确保清除可能存在的动画相关的循环调用，避免内存泄漏
|
|
|
-})
|
|
|
+// import { onBeforeUnmount, onMounted, ref } from 'vue'
|
|
|
+//
|
|
|
+// // 自定义数据列表，可自行修改里面的元素
|
|
|
+// const customData = ref(['苹果', '香蕉', '橙子', '葡萄', '西瓜'])
|
|
|
+//
|
|
|
+// // 用于存储随机生成的数据
|
|
|
+// const randomData = ref('')
|
|
|
+// const itemHeight = 20
|
|
|
+// // 存储自定义列中每个元素的DOM引用
|
|
|
+// const customItemRefs = ref([])
|
|
|
+// // 存储随机列中每个元素的DOM引用
|
|
|
+// const randomItemRefs = ref([])
|
|
|
+//
|
|
|
+// // 设置自定义列元素的DOM引用
|
|
|
+// function setCustomItemRef(el) {
|
|
|
+// if (el) {
|
|
|
+// customItemRefs.value.push(el)
|
|
|
+// }
|
|
|
+// }
|
|
|
+//
|
|
|
+// // 设置随机列元素的DOM引用
|
|
|
+// function setRandomItemRef(el) {
|
|
|
+// if (el) {
|
|
|
+// randomItemRefs.value.push(el)
|
|
|
+// }
|
|
|
+// }
|
|
|
+//
|
|
|
+// // 模拟老虎机转动的函数
|
|
|
+// function startSpin() {
|
|
|
+// let startTime // 记录转动开始时间，用于计算已过去的时间
|
|
|
+// const spinDuration = 2000 // 转动持续时间（毫秒）
|
|
|
+// // 每个滚动项的高度（px），与样式中.slot-item 的 height 对应
|
|
|
+// const totalItems = customData.value.length // 总数据项数量
|
|
|
+// const updateRandomData = () => {
|
|
|
+// const randomIndex = Math.floor(Math.random() * totalItems)
|
|
|
+// randomData.value = customData.value[randomIndex]
|
|
|
+// }
|
|
|
+//
|
|
|
+// const animate = (timestamp) => {
|
|
|
+// if (!startTime) {
|
|
|
+// startTime = timestamp
|
|
|
+// }
|
|
|
+// const elapsedTime = timestamp - startTime
|
|
|
+// if (elapsedTime < spinDuration) {
|
|
|
+// // 移动每个随机列和自定义列的元素，实现滚动效果
|
|
|
+// moveItems(randomItemRefs.value)
|
|
|
+// moveItems(customItemRefs.value)
|
|
|
+// requestAnimationFrame(animate)
|
|
|
+// }
|
|
|
+// else {
|
|
|
+// // 重置随机列和自定义列元素的偏移量，使其停止在最终位置
|
|
|
+// resetItems(randomItemRefs.value)
|
|
|
+// resetItems(customItemRefs.value)
|
|
|
+// // 可以在这里添加停止转动后的逻辑，比如判断是否中奖等
|
|
|
+// }
|
|
|
+// }
|
|
|
+//
|
|
|
+// requestAnimationFrame(animate)
|
|
|
+// }
|
|
|
+//
|
|
|
+// // 移动元素的通用函数，同时强制触发重排
|
|
|
+// function moveItems(itemRefs) {
|
|
|
+// itemRefs.forEach((el) => {
|
|
|
+// const currentOffset = Number.parseInt(el.style.transform?.split(' ')[5] || '0')
|
|
|
+// const newOffset = currentOffset - itemHeight
|
|
|
+// el.style.transform = `translateY(${newOffset}px)`
|
|
|
+// // 强制触发重排，让样式变化及时生效
|
|
|
+// void el.offsetHeight
|
|
|
+// })
|
|
|
+// }
|
|
|
+//
|
|
|
+// // 重置元素偏移量的通用函数
|
|
|
+// function resetItems(itemRefs) {
|
|
|
+// itemRefs.forEach((el) => {
|
|
|
+// el.style.transform = 'translateY(0)'
|
|
|
+// })
|
|
|
+// }
|
|
|
+//
|
|
|
+// // 在组件挂载时初始化相关操作
|
|
|
+// onMounted(() => {
|
|
|
+// // 为自定义列和随机列的每个元素设置初始的transform样式，使其处于起始位置
|
|
|
+// const initItems = (refs) => {
|
|
|
+// refs.forEach((el) => {
|
|
|
+// el.style.transform = 'translateY(0)'
|
|
|
+// })
|
|
|
+// }
|
|
|
+// initItems(customItemRefs.value)
|
|
|
+// initItems(randomItemRefs.value)
|
|
|
+// })
|
|
|
+//
|
|
|
+// // 在组件卸载前清除相关定时器等资源
|
|
|
+// onBeforeUnmount(() => {
|
|
|
+// // 确保清除可能存在的动画相关的循环调用，避免内存泄漏
|
|
|
+// })
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="slot-machine">
|
|
|
- <div class="slot-column custom-column">
|
|
|
- <div v-for="item in customData" :key="item" class="slot-item">
|
|
|
- <div :ref="setCustomItemRef" class="custom-item">
|
|
|
- {{ item }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="slot-column random-column">
|
|
|
- <div v-for="i in 5" :key="i" class="slot-item">
|
|
|
- <div :ref="setRandomItemRef" class="random-item">
|
|
|
- {{ randomData }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <button @click="startSpin">
|
|
|
- 开始转动
|
|
|
- </button>
|
|
|
+ <!-- <div class="slot-column custom-column"> -->
|
|
|
+ <!-- <div v-for="item in customData" :key="item" class="slot-item"> -->
|
|
|
+ <!-- <div :ref="setCustomItemRef" class="custom-item"> -->
|
|
|
+ <!-- {{ item }} -->
|
|
|
+ <!-- </div> -->
|
|
|
+ <!-- </div> -->
|
|
|
+ <!-- </div> -->
|
|
|
+ <!-- <div class="slot-column random-column"> -->
|
|
|
+ <!-- <div v-for="i in 5" :key="i" class="slot-item"> -->
|
|
|
+ <!-- <div :ref="setRandomItemRef" class="random-item"> -->
|
|
|
+ <!-- {{ randomData }} -->
|
|
|
+ <!-- </div> -->
|
|
|
+ <!-- </div> -->
|
|
|
+ <!-- </div> -->
|
|
|
+ <!-- <button @click="startSpin"> -->
|
|
|
+ <!-- 开始转动 -->
|
|
|
+ <!-- </button> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
