zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
在移动web开发中，由于手机界面较小，为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题，通过请教他人以及百度，个人感觉swipe.js比较好用。
它是一个纯javascript工具，不需要跟其它js库一起导入，同时兼容jQuery和zepto，压缩版的大小只有6kb很适合移动端的开发，它的git地址：https://github.com/thebird/swipe
在git上对其的使用方式介绍的相当清楚，关键代码如下
<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<div></div>
<div></div>
<div></div>
</div>
</div>
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
window.mySwipe = Swipe(document.getElementById('slider'),opt);
其中.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)：滑动方法
以下是偶在项目中的实际运用的代码
<div class="banner">
<div id="slider" class="swipe">
<ul class="swipe-wrap">
<li>
<a href="javascript:void(0)">
<img src="img/1.jpg">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/2.jpg">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/3.jpg">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/4.jpg">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/5.jpg">
</a>
</li>
</ul>
<ul class="slide-trigger">
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
.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，然后看到里面一些事件的时候发现一个问题：
$(‘body').swipeUp(function(e){
alert(‘swipeUp');//偶尔有效
})
$(‘body').swipeDown(function(e){
alert(‘swipeDown');//偶尔有效
})
$(‘body').tap(function(){
alert(‘tap');//ok
})
$(‘body').swipeLeft(function(){
alert(‘swipeLeft');//ok
})
$(‘body').swipeRight(function(){
alert(‘swipeRight');//ok
})
在移动端swipeUp，swipeDown不起效果，另外几个有效，是怎么回事呢？
解决方案一：
zepto要引入 touch.js模块 官网上是没有的 去github下载 然后引入 touch.js即可
解决方案二：
是因为阻止了浏览器默认的下拉事件，加上下面一段代码。
document.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
相关文章
这篇文章介绍了JS实现简单的Canvas画图实例代码，有需要的朋友可以参考一下2013-07-07
在JavaScript中,Number类型是基于IEEE754双精度浮点数标准表示的,虽然在常见场景下非常高效,但在处理大数据时,Number类型存在显著的精度限制,在这些场景中,如何精确处理大数据和超大数字成为了一个重要的问题,所以本文给大家介绍了JavaScript超过Number最大值的解决方案2025-01-01
这篇文章主要介绍了微信小程序 button 的样式设置为图片的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
今天，同事反映部分电脑访问系统，安装播放器（Media Player）报错，自己本机测试没问题，但是去用户现场查看情况，部分电脑确实存在此类问题，不知道问题出在何处，希望我帮助解决一下。2009-08-08
本篇主要讲解本地对象Array和Date的各种方法。2010-05-05
这篇文章主要给大家介绍了关于js如何根据class获取元素并且点击元素的相关资料,获取元素集合的方法有很多,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-04-04
这篇文章主要介绍了如何在微信小程序中实现美食展示与收藏的功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起动手尝试一下2022-03-03
详解JavaScript中typeof与instanceof用法
typeof用以获取一个变量或者表达式的类型而instanceof用于判断一个变量是否某个对象的实例，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-10-10
这篇文章主要为大家详细介绍了js仿淘宝放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
本文给大家分享的是使用纯javascript实现放大镜效果的代码，并附上封装的步骤，做电商程序的小伙伴们一定不要错过。2015-03-03
最新评论