Repository navigation
Taro中Swiper组件卡片3D化 #14
Description
DOM格式
<View className="college-container">
<Swiper
className="swiper-block"
circular
autoplay
current={this.state.current}
previous-margin="32rpx"
next-margin="32rpx"
onChange={this.handleChange.bind(this)}
>
{list.slice(0, 1).map(item => {
return (
<SwiperItem className="swiper-item">
<FallbackImage src={item.content.posterPath} directory={false}/>
</SwiperItem>
);
})}
</Swiper>
</View>样式
.index-wrapper {
.college-container {
display: flex;
flex-direction: column;
}
.swiper-block {
height: 258px;
width: 100%;
}
swiper-item {
width: 620px !important;
height: 258px !important;
}
.swiper-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow: unset;
}
.swiper-image {
height: 258px;
width: 620px;
border-radius: 9px;
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.10);
margin: 0px 32px;
z-index: 1;
transform: scale(0.9);
}
.active {
transform: scale(1);
transition: all 0.2s ease-in 0s;
z-index: 20;
}
}
Activity
[-]Taro Swper卡片3D化[/-][+]Taro中Swiper组件卡片3D化[/+]