@import'../../common/animate.css';.content{文本对齐：居中；.content-swiper{高度：100vh；图片{高度：200upx；宽度：200upx；边距顶部：200upx；}}}我的微信公众号：前端实践之路，欢迎关注。需要解决的问题这几天一直在研究如何做微信小程序的滑动轮播。因为我需要同时生成小程序的代码和H5版本的代码，写两套效率不高，所以选择了uni-app。uni-app在基础组件swiper中已经直接支持轮播动画。我主要需要解决以下问题：①如何在swiper中添加css3流行的animate.css动画。②如果添加后滑动轮播，如何保证下一屏动画不会自动播放。③如何实现轮播图的无限循环播放。④如何实现当用户点击按钮时，可以跳转到指定的swiper-item。即跳转到指定画面。⑤小程序和H5版本的代码会生成一个header，H5版本需要隐藏导航栏。以下是我整个制作的思路，仅供参考。另外代码是uni-app开发的，所以在小程序和H5测试都没有问题。另外为了方便小程序开发同学的理解，会提供小程序版本代码和uni-app代码供参考。H5开发中经常用到的代码实现是animate.css。微信自然是支持的，因为微信对上传的小程序有大小限制，所以这里我用了一个很简化的animate.css，删掉了很多-webkit-animation开头的css3。因为我们只需要在小程序和H5中运行，这个影响不大。如果需要，可以从下面的代码中获取。我们先来看下代码：跳转到第二屏@import'../../common/animate.css';.content{文本对齐：居中；.content-swiper{高度：100vh；图片{高度：200upx；宽度：200upx；边距顶部：200upx；}}}首先，uni-app支持sass，直接在css中引入简洁版animate.css。问题①查看文档后发现参数circular使用swiper.jsloop参数可以实现类似H5页面的功能。这里我掉进了uni-app和微信小程序文档中描述的坑。因为一直在寻找loop（循环）的参数，我什至认为这个无限循环的功能实现不了。原来小程序中这个参数叫循环。o(╯□╰)o问题③因为我这里要实现竖屏滑动的效果，所以设置参数vertical为true。在uni-app中，通过change事件可以监听各个轮播画面的变化。在这个事件中，我记录了当前屏幕的下标电流。然后取消所有不在当前屏幕上的css3动画。最后在animationfinish事件中，当swiper滑动动画结束时，给当前屏幕的元素添加css3动画。问题②uni-app中有一个current-item-id参数，代表当前滑块的item-id。这篇文档我看了半天才看懂。原来swiper-item中需要指定item-id。然后当用户点击事件触发时，修改current-item-id绑定的值即可。当我的代码被初始化时，它被分配给item-id为slide2的屏幕。问题④最后一个问题是在uni-app中隐藏H5导航栏。只需在pages.json中将titleNView设置为false即可。微信小程序代码跳转到//index.jsconstapp=getApp()Page({data:{currentId:0,animate_0:'swing',animate_1:'',animate_2:''},onLoad:function(){},goChange:function(){this.setData({currentId:2});},changeSwiper:function(event){letcurrent=event.detail.current;switch(current){case0:this.setData({animate_1:'',animate_2:''});休息;情况1：this.setData({animate_0:'',animate_2:''});休息;案例2：this.setData({animate_0:'',animate_1:''});休息;}},changeFinish:function(event){letcurrent=event.detail.current;switch(current){case0:this.setData({animate_0:'swing',});休息;案例1:this.setData({animate_1:'摇',});休息;案例2：this.setData({animate_2:'tada',});休息;}}})代码我已经托管在腾讯云开发者平台，如有需要请参考代码目录下unpackage/dist/build/h5是生成的H5页面。需要注意的是，本地文件协议不支持部署到web服务器。生成了两个版本的代码供您参考。
