效果
<Swiper
indicatorDots={false}
previousMargin='50px'
nextMargin='50px'
autoplay={false}
interval='100'
onChange={onChangeSwiper}
>
{
[1,2,3].map((item, index) => {
return (
<SwiperItem
key={`item-${index}`}
>
<View className={`demo-item ${currentIndex=== index ? 'active' : ''}`}>
{ item }
</View>
</SwiperItem>
)
})
}
</Swiper>
const [ currentIndex, setCurrentIndex ] = useState(0)
const onChangeSwiper = (e) => {
const idx = e.detail.current
setCurrentIndex(idx)
}
.demo-item {
height: 272px;
color: #fff;
background: #000;
border-radius: 39px;
text-align: center;
transform: scale(.9);
transition: all ease .4s;
&.active {
transform: scale(1);
}
}