社区
HTML5
帖子详情
swiper 、iScroll有没有在滑屏缓冲的时候点击一下就会停止滑动且点击在a链接上不会跳转的方法或者是回调函数?
qq_36163505
2017-11-20 12:37:34
在很多手机APP或者网页上都会有一个快速滑动的时候点击屏幕就会停止滑动,并且就算点在链接上也不会跳转页面是怎么实现的?
很多插件又点击就停止的效果,但是点在链接上就会跳转了,这个怎么解决?
...全文
999
4
打赏
收藏
swiper 、iScroll有没有在滑屏缓冲的时候点击一下就会停止滑动且点击在a链接上不会跳转的方法或者是回调函数?
在很多手机APP或者网页上都会有一个快速滑动的时候点击屏幕就会停止滑动,并且就算点在链接上也不会跳转页面是怎么实现的? 很多插件又点击就停止的效果,但是点在链接上就会跳转了,这个怎么解决?
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用AI写文章
4 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
业余草
2017-12-30
打赏
举报
回复
qq_36163505
2017-11-22
打赏
举报
回复
顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
qq_36163505
2017-11-20
打赏
举报
回复
有没有人?纠结很久了,求帮忙
qq_36163505
2017-11-20
打赏
举报
回复
这是在阻止默认事件的情况下,因为一般移动端好像都会阻止默认事件的
swiper
绑定
点击
事件 向前
滑动
后
点击
失效处理
不算是新问题了 只是想记录下 因为我发现有人还在关注我的博客 所以分享
一下
一般我们写
点击
事件 都习惯绑定在 标签上 如上图 不过 如果结合
swiper
后 你
会
发现
swiper
生成后 如果loop模式 那么 你上来想左
滑动
(也就是向前
滑动
,行为虽然不符合操作习惯)你
会
发现 图片的
点击
事件 是无效的 这是因为
swiper
的无限轮播时
会
自动复制第一个和最后一个页面进行轮播。但...
使用
swiper
3的freeMode属性a连接
点击
失效,
跳转
无效和
swiper
滑动
时a标签误触
源代码是这样的: <!------------nav-----------> <div id="topNav" class="
swiper
-container"> <div class="
swiper
-wrapper"> <div class="
swiper
-slide ac...
关于
swiper
滑动
时a标签误触,导致
跳转
的解决办法
1、思路:判断
swiper
.animating==true,
滑动
的时候把a标签的默认事件给阻止了,否则,让它
跳转
2、代码$(".
swiper
-slide a").click(function(e){ //console.log(
swiper
.animating) if(
swiper
.animating==true){ e.preventDef
iscroll
与
swiper
的冲突
下拉加载用到
iscroll
发现它
会
与
swiper
的轮播图冲突 问题:
滑动
轮播图就
会
直接跳
链接
解决:给
swiper
里面配置一个阻止touchmove冒泡事件的属性 touchMoveStopPropagation : false 更多
Swiper
点击
事件 a
链接
失效
最新写了一个新的响应式网站,里面用到了
swiper
组件 1.初始化
Swiper
var my
Swiper
= new
Swiper
('.
swiper
-container', { loop: true, // 循环模式选项 preventClicks: false, autoplay: { delay: 3000, stopOnLastSlide: false, disableO...
HTML5
39,118
社区成员
5,567
社区内容
发帖
与我相关
我的任务
HTML5
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
复制链接
扫一扫
分享
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章