微信小程序制作可滑动卡片

2022-07-31 685 阅读1分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情 >>

微信小程序制作可滑动卡片

效果图

在这里插入图片描述

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

在这里插入图片描述

之后我们想让卡片的大小随着页面的滑动来随时变化，我们可以通过三元表达式来判断当前的图片是否是展示图片来加上动画效果，可以使用CSS中的`transform`属性来让过渡动画更加平缓

在这里插入图片描述

这样就完成了上部分卡片的制作，下部分的卡片依旧使用一个swiper组件做滑动，一样使用上部分卡片中的放大缩小动画过渡效果

在这里插入图片描述

之后通过swiper的current属性对上下两部分的卡片做一个同步，让两个卡片所在的页面保持一致，这样就可以实现滑动上卡片下卡片会跟着一起滑动，滑动下卡片上卡片也是一样跟着滑动，JS的逻辑没涉及到，一个就是让两个滑块的current同步一样，还有一个就是判断当前页面是否是展示页面

在这里插入图片描述

如有不足之处，欢迎在评论区指导纠正~