温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

swiper实现轮播效果

发布时间:2020-06-22 13:42:35 来源:亿速云 阅读:611 作者:Leah 栏目:web开发

这期内容当中小编将会给大家带来有关swiper实现轮播效果,以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

需要解决的问题

近几日一直在看怎样制作微信小程序的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" @animationfinish="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> <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>     @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-idslide2这一屏上。问题④
  • 最后一个问题时uni-app中隐藏掉H5导航栏。只需要在pages.json中设置titleNViewfalse即可。

微信小程序代码

<!--index.wxml--> <view>     <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/h6中,就是生成好的H5版页面。需要注意的是,要部署到web服务器使用,不支持本地file协议打开。
其中生成了两个版本的代码,方便大家参考。

上述就是小编为大家分享的swiper实现轮播效果了,如果您也有类似的疑惑,不妨参照上述方法进行尝试。如果想了解更多相关内容,请关注亿速云行业资讯。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI