File size: 2,049 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
import { isBrowser } from '@/lib/utils'
import { useEffect, useState } from 'react'
/**
* 一个swipe组件
* 垂直方向，定时滚动
* @param {*} param0
* @returns
*/
export function Swipe({ items }) {
const [activeIndex, setActiveIndex] = useState(0)
const handleClick = (item) => {
if (isBrowser) {
window.open(item?.url)
}
}
useEffect(() => {
const interval = setInterval(() => {
setActiveIndex((activeIndex + 1) % items.length)
}, 3000)
return () => clearInterval(interval)
}, [activeIndex, items.length])
return (
<div className="h-full relative w-full overflow-hidden">
{items.map((item, index) => (
<div
onClick={() => handleClick(item)}
key={index}
className={`absolute top-0 bottom-0 w-full h-full flex justify-center items-center line-clamp-1 transform transition-transform duration-500 ${index === activeIndex ? 'translate-y-0 slide-in' : 'translate-y-full slide-out'
}`}
>
{item.title}
</div>
))}
<style jsx>{`
.slide-in {
animation-name: slide-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.slide-out {
animation-name: slide-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
@keyframes slide-in {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes slide-out {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
`}</style>
</div>
)
};
export default Swipe
|