小程序swiper轮播CSS3动画及跳转到指定swiperitem实现思路

jiezi

5 年前

近几日一直在看怎样制作微信小程序的 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 class="content">
        <button type="primary" @tap="goChange"> 跳转到第二屏 </button>
        <swiper class="content-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 class="swiper-item">
                    <image src="../../static/uni.png" :class="animate_0"></image>
                </view>
            </swiper-item>
            <swiper-item item-id="slide1">
                <view class="swiper-item">
                    <image src="../../static/uni.png" :class="animate_1"></image>
                </view>
            </swiper-item>
            <swiper-item item-id="slide2">
                <view class="swiper-item">
                    <image src="../../static/uni.png" :class="animate_2"></image>
                </view>
            </swiper-item>
            <swiper-item item-id="slide3">
                <view class="swiper-item">
                    <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;
                    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';}
        }
    }
</script>

<style lang="scss">
    @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 动画取消掉。最后在 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.wxml-->
<view class="container">
    <button bindtap='goChange'> 跳转到 </button>
    <swiper vertical="true" circular="true" current="{{currentId}}" indicator-dots="true" bindchange="changeSwiper" bindanimationfinish="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.js
const app = getApp()

Page({
    data: {
        currentId: 0,
        animate_0: 'swing',
        animate_1: '',
        animate_2: ''
    },
    onLoad: 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;
        }
    }
})

我将代码托管到了腾讯云开发者平台，需要的话可以参考。在代码目录 unpackage/dist/build/h5 中，就是生成好的 H5 版页面。需要注意的是，要部署到 web 服务器使用，不支持本地 file 协议打开。
其中生成了两个版本的代码，方便大家参考。

小程序swiper轮播CSS3动画及跳转到指定swiperitem实现思路

需要解决的问题

代码实现

微信小程序代码