首页 > 程序开发 > 综合编程 > 其他综合 >

小程序swiper轮播CSS3动画及跳转到指定swiper-item实现思路 - 前端修炼之路 - SegmentFault 思否

2019-06-19

本人微信公众号:前端修炼之路,欢迎关注。 需要解决的问题 近几日一直在看怎样制作微信小程序的swiper轮播图。因为我既需要生成小程序的代码,也需要生成H5版代码,如果编写两套效率会比较低下,所以选择了uni-

本人微信公众号:前端修炼之路,欢迎关注。

需要解决的问题

近几日一直在看怎样制作微信小程序的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中运行,这样做影响也不大。如果需要的话,可以从下面的代码中获取。

我们先来看下代码:



<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>


首先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.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协议打开。
其中生成了两个版本的代码,方便大家参考。

热点推荐