频道导航

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

2018-12-31 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

其中.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 - 动画运行结束的回调函数

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不起效果，另外几个有效，是怎么回事呢？