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

trigkit4 发布于2019-08-05 17:08 / 871人阅读

摘要：需要解决的问题近几日一直在看怎样制作微信小程序的轮播图。在微信中自然是支持的，因为微信会对上传的小程序有大小限制，所以这里我使用了一个极简化的，其中删掉了很多开头的。这里我掉到了和微信小程序文档描述的坑中。

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

需要解决的问题

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

我们先来看下代码：

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

私有云云服务器 js跳转到指定域名 css3动画跳转到小程序如何实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/59417.html

爱奇艺小程序陪你嗨一夏

摘要：只要滑动了就会触发，并且有一个代表当时滑动到第几个。可能有一点笨笨的。前言在炎热的夏天里最美滋滋的事情是什么呢，我觉得当然是宅在家里，吹着空调，吃着零食看电视剧电影里的帅气小哥哥、漂亮小姐姐了！在闲暇时光我会经常用爱奇艺小程序看视频，加上现在已经学习了一段时间小程序了，啪，动手模仿一个爱奇艺视频小程序的念头就产生了。虽然现在还是个小白，但是希望在这趟爱奇艺小程序之旅上为各位乘客朋友...

edagarli 2019-08-22 18:05 评论0 收藏0
干货--手把手撸vue移动UI框架：滑动轮播

摘要：其次父组件中负责通用的功能，以及轮播的整体架构，其结构如下。下面的是一种移动端的适配方案。接下来实现函数运用动画切换到指定下标的子项到此为止，咱们就已经完成了一个初步的滑动切换轮播图的功能了。前言昨天写了一篇侧边菜单组件的文章，阅读人数挺多的，内心很欣喜（偷着乐，第一篇文章有这么多人看）！乘着这股劲，今天在继续写一篇我们平时工作中更常用的滑动轮播组件的文章。效果展示老规矩，咱们...

MSchumi 2019-08-22 15:12 评论0 收藏0
干货--手把手撸vue移动UI框架：滑动轮播

摘要：其次父组件中负责通用的功能，以及轮播的整体架构，其结构如下。下面的是一种移动端的适配方案。接下来实现函数运用动画切换到指定下标的子项到此为止，咱们就已经完成了一个初步的滑动切换轮播图的功能了。前言昨天写了一篇侧边菜单组件的文章，阅读人数挺多的，内心很欣喜（偷着乐，第一篇文章有这么多人看）！乘着这股劲，今天在继续写一篇我们平时工作中更常用的滑动轮播组件的文章。效果展示老规矩，咱们...

时飞 2019-08-05 18:02 评论0 收藏0
指尖一点歌声来--微信小程序之仿网易云音乐心得

摘要：为了提高自己，最近在学习微信小程序，选题是仿网易云音乐。查文档发现，小程序中图片加载完成后，有一个加载完成事件。前者在微信客户端版本就不开始维护了，后者低版本需做兼容处理。目前还有一些功能暂未实现，会在以后继续完善项目，继续学习。为了提高自己，最近在学习微信小程序，选题是仿网易云音乐。期间踩过了大把的坑，bug出现的难受和解决bug欢喜，一直是伴随我阶段性学习这个项目的心情。初步完成...

KitorinZero 2019-08-22 11:18 评论0 收藏0
用小程序做一个类似于苹果AssistiveTouch功能

摘要：二我们做这个功能，第二步就是要想思路思路就是，利用微信中的滑动事件，外加控制样式，来完成这个功能。三这是项目的图，废话不多说，直接撸代码。一、首先我先介绍一下，我们要做一个什么样的项目功能项目功能就是一个音频点击播放，当点击为播放的状态时，一个音频的动图出现，而且是可以跟随着手指的滑动而滑动，而且，在滑动动图的时候，当前下的页面是不可以跟随着我的滑动而上下滚动，当停止滑动的时...

MarvinZhang 2019-08-29 16:57 评论0 收藏0