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

需要解决的问题

近几日一直在看怎样制作微信小程序的swiper轮播图。因为我既需要生成小程序的代码，也需要生成H5版代码，如果编写两套效率会比较低下，所以选择了?uni-app?。

uni-app?已经在基础组件?swiper?中已经直接支持了轮播动画。

我主要需要解决的是以下几个问题：

animate.css
swiper-item

以下就是我整个制作的思路过程，仅供参考。另外，代码是?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">
                <"swiper-item">
                    <image src="../../static/uni.png" :class="animate_0"></image>
                </view>
            </swiper-item>
            <"slide1">
                <"animate_1"></"slide2">
                <"animate_2"></"slide3">
                <"animate_3"></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'] = 'animate_2'] = 'animate_3'] = '';
                    break;
                    1: 
                        'animate_0'] = ''; 
                    2:
                        3:
                        'animate_2'] = break;
                }

            },changeFinish(event){ // swiper动画完成之后，给当前swiper添加动画效果
                let current = event.detail.current;
                switch(current){
                    0: 
                        'animate_0'] = 'animated swing';
                    1:
                        'animate_1'] = 'animated shake';
                    'animated tada';
                    'animated heartBeat';
                    break;
                }
            },goChange(){
                '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.js?loop?参数的功能。这里我掉到了?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?即可。

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

微信小程序代码

<!--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' 'animated {{animate_0}}'></image>
        </swiper-item>
        <swiper-item>
            <image src='animated {{animate_1}}'></image>
        </swiper-item>
        <swiper-item>
            <image src='animated {{animate_2}}'></image>
        </swiper-item>
    </swiper>
</view>
//index.js
const app = getApp()

Page({
    data: {
        currentId: 0,animate_0: 'swing',animate_1: ''
    },onLoad: function() {

    },goChange: function() {
        this.setData({
            currentId: 2
        });
    },changeSwiper: function(event) {
        let current = event.detail.current;
        switch (current) {
            0:
                this.setData({
                    animate_1: ''
                });
                break;
            1:
                this.setData({
                    animate_0: 2:
                break;
        }
    },changeFinish: function('shake',51); font-weight: 700;">this.setData({
                    animate_2: 'tada',51); font-weight: 700;">break;
        }
    }
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!