风君雪科技博客

  • 首页
  • 业界
  • 前端
  • 运维
  • 建站
  • 软件
  • 生活
  • 后端
  • 创投
  • 运营
  • 程序人生
    • 影视
    • 游戏
    • 句子
    • 资源
  • 其他
    • 说说
  • 关于本站
  1. 首页
  2. 运维
  3. 正文

swiper实现轮播效果

2023年3月25日 13点热度 0人点赞 0条评论

这期内容当中小编将会给大家带来有关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-id为slide2这一屏上。问题④
  • 最后一个问题时uni-app中隐藏掉H5导航栏。只需要在pages.json中设置titleNView为false即可。

微信小程序代码

<!--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 微信小程序
最后更新:2023年3月25日

风君子

独自遨游何稽首 揭天掀地慰生平

点赞
< 上一篇
下一篇 >

猜你喜欢

  • 青海健康码小程序叫什么(SEM教程学习平台)

  • 微信小程序如何实现下拉选项框

  • 微信小程序中怎么实现map地图

  • 微信小程序工具程序调试的方法

  • 微信小程序中如何实现轮播图

  • 微信小程序之斗地主记牌器(好玩的微信小程序游戏排行)

  • 微信小程序如何实现上传图片小功能

  • 怎么用微信小程序实现计算器功能

  • 怎么在微信小程序中绘制一个table表格

  • 微信小程序如何实现搜索功能

  • 微信小程序应用和页面生命周期实例分析

  • 微信小程序添加插屏广告并设置显示频率的示例分析

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

风君子

独自遨游何稽首 揭天掀地慰生平

最新 热点 随机
最新 热点 随机
华为培训的认证领域很广,包括路由交换、无线局域网、传送网、安全、统一通信、视讯、 路由三合一神器(三合一无线路由器哪个好) 路由器放这个位置(无线路由器装在哪个位置好) 网游名称551个 关于春回大地的句子有哪些 描写春回大地的句子集锦 爱听4G在哪里修改密码?密码修改方法图解 化妆品取名780个 VLAN之SVI与单臂路由(单臂路由和svi) 岳阳特产小吃能带走的 好听的墙绘工作室名字314个
手机屏幕变滑小妙招柒染当网名啥意思127个四月都有什么花开CPU中Cache是什么及组成结构介绍建筑工程一切险是什么?安全分析的几个好的工具网站的使用手机图片链接地址怎么获取python的源代码下载_官方下载python源码,编译linux版本的python「建议收藏」(Python.org)路由器六根天线怎么摆微软 Win11 虚拟桌面过渡动画回归,并添加切换提示
每天坐高铁上下班是什么体验?一个月2400元 神似锤子Logo LG双屏新机首曝:骁龙765G/主屏可旋转 延续“超大杯” 三星正开发三款Galaxy S21新机:屏下摄像头+AMD GPU有戏? 德国新冠疫苗接种证书缺防伪证明:手写信息易被伪造 侠客风云传千年何首乌怎么获得_千年何首乌及酸梅获得方法推荐 小米 Redmi K20 推送 MIUI 12.0.2 稳定版内测 暴雪橙色预警!北方多地迎暴雪 北京初雪防疫志愿者和居民大合唱 vc6Secs.exe是什么进程 Space X猎鹰9号将60颗星链卫星送入轨道 总数达360颗 六辆珍稀Lotus Esprit被拍卖 世界上最好的跑车之一
标签聚合
芯片 额度 快科技 信用卡 利息 IT资讯 旗舰 iphone 荣耀 借款人 马斯克 智能手机 手机 电动车 特斯拉 支付宝 苹果 三星 来了 游戏 投资者 网友 投资理财 比亚迪 理财知识 银行卡 微软 身份证 京东 利率 程序 AMD 腾讯 余额 汽车 中国 华为 教程 处理器 贷款 信用 秘籍 银行 显卡 科技 美国 业界 股票 股价 小米

COPYRIGHT © 2023 风君雪博客园. ALL RIGHTS RESERVED.

粤ICP备2022155369号