zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题

在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用。

它是一个纯javascript工具,不需要跟其它js库一起导入,同时兼容jQuery和zepto,压缩版的大小只有6kb很适合移动端的开发,它的git地址:

在git上对其的使用方式介绍的相当清楚,关键代码如下

.swipe { overflow: hidden; visibility: hidden; position: relative; } .swipe-wrap { overflow: hidden; position: relative; } .swipe-wrap > div { float:left; width:100%; position: relative; }

其中.swipe嵌套.swipe-wrap这个html树模型最好不要改动,至于最里面的div可以更换其他,如li 等

仅仅只需要上诉的几段代码即可完成轮播图的制作,但是在实际的项目中,特别是在首页顶部的banner上还需要加入page的索引,还需要对控件的参数进行配置,

它的主要参数配置如下:

startSlide Integer (default:0) - 开始滚动的位置

speed Integer (default:300) - 动画滚动的间隔(秒数)

auto Integer - 开始自动幻灯片(以毫秒为单位幻灯片之间的时间)

continuous Boolean (default:true) - 创建一个无限的循环(当滑动到所有动画结束时是否循环滑动)

disableScroll Boolean (default:false) - 当滚动滚动条时是否停止幻灯片滚动

stopPropagation Boolean (default:false) - 是否停止事件冒泡

callback Function - 幻灯片运行中的回调函数

transitionEnd Function - 动画运行结束的回调函数

而他的主要api函数如下:

prev():上一页

next():下一页

getPos():获取当前页的索引

getNumSlides():获取所有项的个数

slide(index,duration):滑动方法

以下是偶在项目中的实际运用的代码

.banner { width: 100%; position: relative; } .banner .swipe { overflow: hidden; position: relative; } .banner .swipe-wrap { overflow: hidden; position: relative; list-style: none; } .banner .swipe-wrap li { float: left; position: relative; } .banner img { width: 100%; vertical-align: middle; } .banner .slide-trigger { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 10; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; list-style: none; } .banner .slide-trigger li { width: 10px; height: 10px; background: #FFF; margin: 5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .banner .slide-trigger .cur { background: #2fc7c9; } var slider = $('#slider'); slider.find(".slide-trigger").find("li").eq(0).addClass("cur"); window.mySwipe = new Swipe(document.getElementById('slider'),{ speed: 400,auto: 3000,callback: function(index,elem) { slider.find(".slide-trigger").find("li").eq(index).addClass("cur").siblings().removeClass("cur"); } });

zepto中的swipeUp,swipeDown不起效果

我正在看zepto,然后看到里面一些事件的时候发现一个问题:

在移动端swipeUp,swipeDown不起效果,另外几个有效,是怎么回事呢?

解决方案一:

zepto要引入 touch.js模块 官网上是没有的 去github下载 然后引入 touch.js即可

解决方案二:

是因为阻止了浏览器默认的下拉事件,加上下面一段代码。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)