小程序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" @animati ="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> < >    export default {        data() {            return {                item_id: 'slide2',                animate_0: 'animated swing',                animate_1: '',                animate_2: '',                animate_3: ''            }        },         () {        },        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;                    case 3:                        this['animate_0'] = this['animate_1'] = this['animate_2'] = '';                    break;                }            },            changeFinish(event){ // swiper动画完成之后，给当前swiper添加动画效果                let current = event.detail.current;                switch(current){                    case 0:                         this['animate_0'] = 'animated swing';                    break;                    case 1:                        this['animate_1'] = 'animated shake';                    break;                    case 2:                        this['animate_2'] = 'animated tada';                    break;                    case 3:                        this['animate_3'] = 'animated heartBeat';                    break;                }            },            goChange(){                this.item_id = 'slide1';            }        }    }</ > <style>    @import '../../common/animate.css';    .content {        text-align: center;        .content-swiper{            height: 100vh;            image{                height: 200upx;                width: 200upx;                margin-top: 200upx;            }        }    }</style>

首先uni-app支持sass。在css中直接引入了简洁版animate.css。问题①

之后通过查看文档，发现circular这个参数可以实现类似H5页面使用swiper.jsloop参数的功能。这里我掉到了uni-app和微信小程序文档描述的坑中。因为一直在找loop（循环）这个参数，我甚至都以为实现不了这个无限循环的功能了呢。原来小程序中这个参数叫做circular（圆形）。o(╯□╰)o 问题③

因为我这里要实现一个竖屏的滑动效果，所以将参数vertical设置为true。

在uni-app中，通过change事件，可以监听每一个轮播屏的改变。在这个事件中，我记录的当前屏的下标current。然后将非当前屏的全部css3动画取消掉。最后在animati 事件中，当swiper滑动动画结束后，给当前屏的元素添加css3动画。问题②

在uni-app中有个current-item-id参数，代表当前所在滑块的 item-id。这个文档我看了好久，才明白。原来是需要在swiper-item中指定上item-id。然后当用户点击事件触发时，修改绑定到current-item-id上的值即可。我的代码初始化时指定到了item-id为slide2这一屏上。问题④

最后一个问题时uni-app中隐藏掉H5导航栏。只需要在pages.json中设置 NView为false即可。

微信小程序代码

<!--index.w --><view class="container">    <button bindtap='goChange'>跳转到</button>    <swiper vertical="true" circular="true" current="{{currentId}}" indicator-dots="true" bindchange="changeSwiper" bindanimati ="changeFinish">        <swiper-item>            <image src='../../static/uni.png' class='animated {{animate_0}}'></image>        </swiper-item>        <swiper-item>            <image src='../../static/uni.png' class='animated {{animate_1}}'></image>        </swiper-item>        <swiper-item>            <image src='../../static/uni.png' class='animated {{animate_2}}'></image>        </swiper-item>    </swiper></view>//index.jsconst app = getApp()Page({    data: {        currentId: 0,        animate_0: 'swing',        animate_1: '',        animate_2: ''    },     : function() {    },    goChange: function() {        this.setData({            currentId: 2        });    },    changeSwiper: function(event) {        let current = event.detail.current;        switch (current) {            case 0:                this.setData({                    animate_1: '',                    animate_2: ''                });                break;            case 1:                this.setData({                    animate_0: '',                    animate_2: ''                });                break;            case 2:                this.setData({                    animate_0: '',                    animate_1: ''                });                break;        }    },    changeFinish: function(event) {        let current = event.detail.current;        switch (current) {            case 0:                this.setData({                    animate_0: 'swing',                });                break;            case 1:                this.setData({                    animate_1: 'shake',                });                break;            case 2:                this.setData({                    animate_2: 'tada',                });                break;        }    }})

需要注意的是，要部署到web服务器使用，不支持本地file协议打开。

其中生成了两个版本的代码，方便大家参考。

下载链接：网站源码/小程序源码/网站模板下载

Tags： 程序 动画 指定 轮播 转到