平武建站

swiper实现轮播效果-创新互联

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

员工经过长期磨合与沉淀，具备了协作精神，得以通过团队的力量开发出优质的产品。创新互联坚持“专注、创新、易用”的产品理念，因为“专注所以专业、创新互联网站所以易用所以简单”。公司专注于为企业提供网站设计、网站建设、微信公众号开发、电商网站开发，成都微信小程序，软件定制设计等一站式互联网企业服务。需要解决的问题

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

  • ①在swiper中怎样添加css3流行的animate.css动画。
  • ②添加好后如果滑动了轮播图，怎样能保证下一屏的动画不自动播放。
  • ③怎样能实现轮播图的无限循环播放。
  • ④怎样能实现，当用户点击一个按钮之后，可以跳转到指定的swiper-item中。也就是跳转到指定的屏。
  • ⑤小程序和H5版的代码会生成一个头部，在H5版中需要隐藏掉导航栏。

uni-app开发，所以在小程序中和H5中测试都没有问题。另外为了方便小程序开发同学了解，会提供小程序版代码和uni-app代码供参考。

代码实现

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

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


文章标题：swiper实现轮播效果-创新互联
网站地址：http://pwwzsj.com/article/ipdip.html

其他资讯