1. 在swiper中添加css3流行的animate.css动画。2. 确保在滑动轮播图时，下一屏动画不自动播放。3. 实现轮播图无限循环播放。4. 用户点击按钮跳转到指定的swiper-item。5. 小程序与H5版代码的头部需在H5版中隐藏导航栏。使用uni-app开发时，可以轻松实现这些问题。在H5开发中常用animate.css，微信中...
小程序swiper轮播CSS3动画及跳转到指定swiper-item的使用
制作微信小程序的swiper轮播图时，选择uni-app可以同时生成小程序与H5版代码，提高开发效率。在开发过程中，需要解决以下问题：
1. 在swiper中添加css3流行的animate.css动画。
2. 确保在滑动轮播图时，下一屏动画不自动播放。
3. 实现轮播图无限循环播放。
4. 用户点击按钮跳转到指定的swiper-item。
5. 小程序与H5版代码的头部需在H5版中隐藏导航栏。
使用uni-app开发时，可以轻松实现这些问题。在H5开发中常用animate.css，微信中也支持。但需注意，代码需要进行简化，去掉部分-webkit-animation，以适应小程序与H5环境。代码如下：
引入简洁版animate.css，通过uni-app的sass功能实现。
使用circular参数实现无限循环播放，解决小坑。
设置vertical为true实现竖屏滑动效果。
利用change事件监听屏幕变化，记录当前屏下标，取消非当前屏动画。在animationfinish事件后添加动画。
利用current-item-id参数，通过swiper-item指定item-id。用户点击时修改此值实现跳转。
在pages.json中设置titleNView为false，隐藏H5导航栏。
提供小程序版与uni-app代码，方便参考。
注意，部署至web服务器使用时，不支持本地file协议打开。2024-11-14
