站长图库向大家介绍了小程序swiper轮播,CSS3动画,跳转到指定swiper-item等相关知识,希望对您有所帮助
近几日一直在看怎样制作微信小程序的swiper轮播图。因为我既需要生成小程序的代码，也需要生成H5版代码，如果编写两套效率会比较低下，所以选择了uni-app。
uni-app已经在基础组件swiper中已经直接支持了轮播动画。
我主要需要解决的是以下几个问题：
① 在swiper中怎样添加css3流行的animate.css动画。
② 添加好后如果滑动了轮播图，怎样能保证下一屏的动画不自动播放。
③ 怎样能实现轮播图的无限循环播放。
④ 怎样能实现，当用户点击一个按钮之后，可以跳转到指定的swiper-item中。也就是跳转到指定的屏。
⑤ 小程序和H5版的代码会生成一个头部，在H5版中需要隐藏掉导航栏。
以下就是我整个制作的思路过程，仅供参考。另外，代码是uni-app开发，所以在小程序中和H5中测试都没有问题。另外为了方便小程序开发同学了解，会提供小程序版代码和uni-app代码供参考。
代码实现
在H5开发中经常使用的就是animate.css。在微信中自然是支持的，因为微信会对上传的小程序有大小限制，所以这里我使用了一个极简化的animate.css，其中删掉了很多-webkit-animation开头的css3。因为我们只需要在小程序和H5中运行，这样做影响也不大。如果需要的话，可以从下面的代码中获取。
我们先来看下代码：
<template> <view> <button type="primary" @tap="goChange">跳转到第二屏</button> <swiper :vertical="true" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" @change="changeSwiper" @animationfinish="changeFinish" :current-item-id="item_id" circular="true"> <swiper-item item-id="slide0"> <view> <image src="../../static/uni.png" :class="animate_0"></image> </view> </swiper-item> <swiper-item item-id="slide1"> <view> <image src="../../static/uni.png" :class="animate_1"></image> </view> </swiper-item> <swiper-item item-id="slide2"> <view> <image src="../../static/uni.png" :class="animate_2"></image> </view> </swiper-item> <swiper-item item-id="slide3"> <view> <image src="../../static/uni.png" :class="animate_3"></image> </view> </swiper-item> </swiper> </view></template> <script> export default { data() { return { item_id: 'slide2', animate_0: 'animated swing', animate_1: '', animate_2: '', animate_3: '' } }, onLoad() { }, methods: { changeSwiper(event){ // 清空除了当前swiper以外的所有动画 let current = event.detail.current; // 当前页下标 this.item_id = 'slide'+current; // 这里必须记录，否则只能跳转一次 switch (current){ case 0: this['animate_1'] = this['animate_2'] = this['animate_3'] = ''; break; case 1: this['animate_0'] = this['animate_2'] = this['animate_3'] = ''; break; case 2: this['animate_0'] = this['animate_1'] = this['animate_3'] = ''; break; &n