swiper移入暂停_react中swiper注意事项及鼠标划入停止轮播
首先是实例化swiper
这里有一个注意点,就是实例化的时机
如果你的swiper内容是写死的,可以在componentDidMount中实例化,但是如果你的内容是通过接口异步请求过来的,就必须在componentDidUpdate里实例化,因为如果在 componentDidMount 中实例化,异步请求过来的内容可能还没有挂载完就实例化就会出现问题
componentDidUpdate(){
this.initialBannerSwiper()
}
这里还用到了一个知识点,就是单例模式,因为componentDidMount会多次执行,所以使用单例模式避免生成多个实例
initialBannerSwiper =()=>{
if(this.bannerSwiper){
return this.bannerSwiper //单例模式
}
this.bannerSwiper = new Swiper('#swiper-banner', {
slidesPerView: 1, //设置slider容器能够同时显示的slides数量(carousel模式) 默认值为1。
observer: true, //当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。
observeParents: true, //将observe应用于Swiper的父元素。当Swiper的父元素变化时,例如window.resize,Swiper更新。
shortSwipes: false, // 这个属性后面会说
slideToClickedSlide: false, //设置为true则点击slide会过渡到这个slide。
loop: true, //开启循环
autoplay: true, //设置为true启动自动切换,并使用默认的切换设置。
pagination: {
clickable: true, //此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。
el: '#swiper-pagination-banner',
}
})
this.hoverStop()
}
鼠标划入停止轮播
swiper居然没有这个api来控制,好吧 只能自己来用js来控制了
bannerSwiper.$el
swiper的container的Dom7/jQuery对象
Swiper4自带有DOM7库,因此无需另外加载Jquery等库即可对Dom7对象使用以下常用的DOM操作
this.bannerSwiper.$el[0]就可以拿到 实例的container的dom节点
hoverStop = ()=>{
let that = this.bannerSwiper.$el[0] // 实例的container的dom节点
that.addEventListener("mouseenter", () => {
this.bannerSwiper.autoplay.stop()
that.addEventListener("mousemove", () => {
})
})
that.addEventListener("mouseleave",()=>{
this.bannerSwiper.autoplay.start()
})
}
你可能还会遇到一个小问题
这也是我遇到的,那就是鼠标划到轮播图的时候点击轮播图 会偶尔出现切换的情况,swiper有一个属性可以控制 shortSwipes ,官方描述是这样的
默认允许短切换。设置为false时,只能长切换,进行快速且短距离的滑动无法触发切换。
为什么会出现这种情况呢,因为swiper是专注于移动端的,划上swiper点击的时候可能鼠标方向偏了一点,swiper会以为你是手机上的滑动,设置为false时,短距离的滑动就不会发生切换了,下面是官方的说法
Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!
最后
记得在组件卸载的时候解绑事件和销毁swiper实例哦
componentWillUnmount(){
if(this.bannerSwiper){
this.bannerSwiper.detachEvents()
this.bannerSwiper.destroy()
}
}
swiper真的强大,了解更多请参考 swiper 文档
如果对您有帮助记得给个 喜欢 哦
swiper移入暂停_react中swiper注意事项及鼠标划入停止轮播相关推荐
- html轮播图鼠标可以暂停,原装js轮播图,鼠标移入停止轮播,移出继续轮播
要求:1.点击按钮,切换图片: 2.图片能够自动轮播: 3.鼠标移入,轮播停止:移出继续轮播: 知识点:1.定时器:setInterval(): 2.鼠标移入事件:onmouseenter/onmou ...
- JS来实现轮播图(走马灯)可左右切换图片,鼠标移入会停止轮播
效果一: 会自动进行轮播,当鼠标进入轮播图区域会停止轮播,点击左右箭头可以向前.向后进行切换图片 效果二: 这种效果比第一种效果简单,只要删除一些代码和修改一些样式即可. 实现原理 轮播图整体是放在u ...
- vue组件制作专题 - (mpvue专用)在mpvue中纯自己写css实现简单左右轮播
在mpvue中纯自己写css实现简单左右轮播 CSDN:jcLee95 邮箱:291148484@163.com 项目中,在src目录下的components目录下新建一个新文件并重命名为jcmv-c ...
- html中轮播图中图片样式如何调,纯CSS3做轮播图基础样式设置
一,准备工作 轮播图的主要遇新是直朋能到分览思想: 1,让友,记基开前不接些前家我告对猿果水使钮控轮播的几张图片横向连成一片,默认是从上到下(如果图片像朋支不器几事为的时后级功发发来久都这样含制层是请 ...
- vue2/3项目中使用Vue Carousel 3D实现 Carousel 3D 轮播
项目需求大概是这个样子,这种并不能通过围成一周再旋转父级实现,因此图方便选择了组件 轮播 vue2,可以直接使用 Playground - Vue Carousel 3D - 3D Carousel ...
- 微信小程序原生组件swiper在mpvue工程中使用注意事项
时下微信小程序开发框架中mpvue是主流的选择之一.其中,免不了还要使用部分小程序原生的组件.swiper组件几乎成为典型小程序界面的必备组成组件之一.但是,我在试用中遇到一个典型问题,很多相关网页中 ...
- 使用swiper实现视频和图片混合轮播
完成需求:轮播页面自动滚动循环播放素材,在视频页面自动播放视频至视频结束后继续轮播下一个素材,手动切换时视频页暂停播放,切换回来后恢复播放. 1.安装swiper相关插件 2.在轮播页面引入 impo ...
- 七、微信小程序-快速回顾 ( swiper 轮播图、scroll-view 可滚动视图区域 )
文章目录 一.swiper 轮播图 1.1. swiper 基本使用 1.2. 调整轮播图和图片的大小 二.scroll-view 可滚动视图区域 一.swiper 轮播图 轮播图是项目中最常见的功能 ...
- html中多个图片轮播代码怎么写,Html5如何快速在页面中写出多个轮播图效果
我们在做项目的过程中,有时候客户需求要求你在同一个页面中,写几个不同样式的轮播图效果,那么如何快速实现呢?(要知道若果你每个轮播图都要用原生javascript写的话,会很麻烦,代码也不够简洁) 这里 ...
最新文章
- python输入一个整数倒序输出_利用Python实现倒序任意整数
- 集群的可扩展性及其分布式体系结构(1)
- python str 换行_一步一步学Python3(小学生也适用) 第八篇: 字符串(str)类型(上)...
- java 运动_java web 运动前端
- lnmp升级PHP环境
- python 将txt文件转换为excel_Python实现读取txt文件并转换为excel的方法示例
- office 2019 word公式键盘输入空格无响应
- linux tar 绝对路径,tar打包使用绝对路径详解
- 戒指戴在不同的手指上代表的意思
- 使用 NVIDIA Kaolin Wisp 重建3D场景
- 你家kafka正常运行着吗
- 计算机中最小值的公式,用数组公式在数值列中查找大于指定值的最小值
- codeforces1292C Xenon‘s Attack on the Gangs
- SIGGRAPH 2018 见闻录
- 域用户不准更改计算机名,请教高手,域环境下如何不退域修改计算机名?
- 比尔·盖茨创立的泰拉能源获SK集团投资2.5亿美元;阿特拉斯科普柯中国工业气体装备研发生产基地落户苏州 | 美通企业日报...
- 搭建Discuz论坛网站-最新版Discuz3.4
- 对象创建过程 流程解析图 详细之极
- 网易北京研发中心-网易传媒部门深度学习算法实习生面试总结
- 元旦节前后,Python兼职接单的小高潮来了
热门文章
- 在php里让字体划过变色,鼠标划过字体时如何用css来实现字体变色?(代码实测)...
- mysql 双从性能_MySQL双主一致性架构优化
- c51单片机有几个终端语言,吃过大亏,才知道要从51单片机入手
- fastdfs 吗 支持windows_主流开源文件存储系统-fastdfs是否支持windows?你可以选择minio...
- oracle insert 新增语句
- mysql使用字符函数length,获取参数值的字节个数
- 计算机网络基础:网络分类和拓扑结构知识笔记
- 盘点八个程序员必备的代码编辑器
- Spring原理只要看这篇文章就够了
- 安装并配置ROS环境