首页-教程-Web前端

小程序swiper轮播CSS3动画及跳转到指定swiper-item的使用

 4778

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

我们先来看下代码：

  1. <template>
  2.     <view>
  3.         <button type="primary" @tap="goChange">跳转到第二屏</button>
  4.         <swiper :vertical="true" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" @change="changeSwiper" @animationfinish="changeFinish" :current-item-id="item_id" circular="true">
  5.             <swiper-item item-id="slide0">
  6.                 <view>
  7.                     <image src="../../static/uni.png" :class="animate_0"></image>
  8.                 </view>
  9.             </swiper-item>
  10.             <swiper-item item-id="slide1">
  11.                 <view>
  12.                     <image src="../../static/uni.png" :class="animate_1"></image>
  13.                 </view>
  14.             </swiper-item>
  15.             <swiper-item item-id="slide2">
  16.                 <view>
  17.                     <image src="../../static/uni.png" :class="animate_2"></image>
  18.                 </view>
  19.             </swiper-item>
  20.             <swiper-item item-id="slide3">
  21.                 <view>
  22.                     <image src="../../static/uni.png" :class="animate_3"></image>
  23.                 </view>
  24.             </swiper-item>
  25.         </swiper>
  26.     </view>
  27. </template> 
  28. <script>
  29.     export default {
  30.         data() {
  31.             return {
  32.                 item_id: 'slide2',
  33.                 animate_0: 'animated swing',
  34.                 animate_1: '',
  35.                 animate_2: '',
  36.                 animate_3: ''
  37.             }
  38.         },
  39.         onLoad() {
  40.         },
  41.         methods: {
  42.             changeSwiper(event){    // 清空除了当前swiper以外的所有动画
  43.                 let current = event.detail.current;    // 当前页下标
  44.                 this.item_id = 'slide'+current;     // 这里必须记录，否则只能跳转一次
  45.                 switch (current){
  46.                     case 0:
  47.                         this['animate_1'] = this['animate_2'] = this['animate_3'] = '';
  48.                     break;
  49.                     case 1: 
  50.                         this['animate_0'] = this['animate_2'] = this['animate_3'] = ''; 
  51.                     break;
  52.                     case 2:
  53.                         this['animate_0'] = this['animate_1'] = this['animate_3'] = '';
  54.                     break;
  55.                     case 3:
  56.                         this['animate_0'] = this['animate_1'] = this['animate_2'] = '';
  57.                     break;
  58.                 }
  59.             },
  60.             changeFinish(event){ // swiper动画完成之后，给当前swiper添加动画效果
  61.                 let current = event.detail.current;
  62.                 switch(current){
  63.                     case 0: 
  64.                         this['animate_0'] = 'animated swing';
  65.                     break;
  66.                     case 1:
  67.                         this['animate_1'] = 'animated shake';
  68.                     break;
  69.                     case 2:
  70.                         this['animate_2'] = 'animated tada';
  71.                     break;
  72.                     case 3:
  73.                         this['animate_3'] = 'animated heartBeat';
  74.                     break;
  75.                 }
  76.             },
  77.             goChange(){
  78.                 this.item_id = 'slide1';
  79.             }
  80.         }
  81.     }
  82. </script> 
  83. <style>
  84.     @import '../../common/animate.css';
  85.     .content {
  86.         text-align: center;
  87.         .content-swiper{
  88.             height: 100vh;
  89.             image{
  90.                 height: 200upx;
  91.                 width: 200upx;
  92.                 margin-top: 200upx;
  93.             }
  94.         }
  95.     }
  96. </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即可。

微信小程序代码

  1. <!--index.wxml-->
  2. <view class="container">
  3.     <button bindtap='goChange'>跳转到</button>
  4.     <swiper vertical="true" circular="true" current="{{currentId}}" indicator-dots="true" bindchange="changeSwiper" bindanimationfinish="changeFinish">
  5.         <swiper-item>
  6.             <image src='../../static/uni.png' class='animated {{animate_0}}'></image>
  7.         </swiper-item>
  8.         <swiper-item>
  9.             <image src='../../static/uni.png' class='animated {{animate_1}}'></image>
  10.         </swiper-item>
  11.         <swiper-item>
  12.             <image src='../../static/uni.png' class='animated {{animate_2}}'></image>
  13.         </swiper-item>
  14.     </swiper>
  15. </view>
  16. //index.js
  17. const app = getApp()
  18. Page({
  19.     data: {
  20.         currentId: 0,
  21.         animate_0: 'swing',
  22.         animate_1: '',
  23.         animate_2: ''
  24.     },
  25.     onLoad: function() {
  26.     },
  27.     goChange: function() {
  28.         this.setData({
  29.             currentId: 2
  30.         });
  31.     },
  32.     changeSwiper: function(event) {
  33.         let current = event.detail.current;
  34.         switch (current) {
  35.             case 0:
  36.                 this.setData({
  37.                     animate_1: '',
  38.                     animate_2: ''
  39.                 });
  40.                 break;
  41.             case 1:
  42.                 this.setData({
  43.                     animate_0: '',
  44.                     animate_2: ''
  45.                 });
  46.                 break;
  47.             case 2:
  48.                 this.setData({
  49.                     animate_0: '',
  50.                     animate_1: ''
  51.                 });
  52.                 break;
  53.         }
  54.     },
  55.     changeFinish: function(event) {
  56.         let current = event.detail.current;
  57.         switch (current) {
  58.             case 0:
  59.                 this.setData({
  60.                     animate_0: 'swing',
  61.                 });
  62.                 break;
  63.             case 1:
  64.                 this.setData({
  65.                     animate_1: 'shake',
  66.                 });
  67.                 break;
  68.             case 2:
  69.                 this.setData({
  70.                     animate_2: 'tada',
  71.                 });
  72.                 break;
  73.         }
  74.     }
  75. })

需要注意的是，要部署到web服务器使用，不支持本地file协议打开。

其中生成了两个版本的代码，方便大家参考。



TAG标签：
本文网址：https://www.zztuku.com/index.php/detail-7850.html
站长图库 - 小程序swiper轮播CSS3动画及跳转到指定swiper-item的使用
申明：如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐