微信小程序||可滑动卡片

效果图

 
这次使用到了小程序的swiper组件，CSS的transform属性做动画，JS的数据同步
 
利用小程序的swiper组件创建滑块来让图片进行左右滑动，创建之后图片之间的滑动是不会产生大小变化的
 

 
之后我们想让卡片的大小随着页面的滑动来随时变化，我们可以通过三元表达式来判断当前的图片是否是展示图片来加上动画效果，可以使用CSS中的transform属性来让过渡动画更加平缓
 
 
这样就完成了上部分卡片的制作，下部分的卡片依旧使用一个swiper组件做滑动，一样使用上部分卡片中的放大缩小动画过渡效果
 
 
之后通过swiper的current属性对上下两部分的卡片做一个同步，让两个卡片所在的页面保持一致，这样就可以实现滑动上卡片下卡片会跟着一起滑动，滑动下卡片上卡片也是一样跟着滑动
 
JS的逻辑没涉及到，一个就是让两个滑块的current同步一样，还有一个就是判断当前页面是否是展示页面
 

 

这次分享就到此结束了