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


Posted in Javascript onAugust 27, 2015

在移动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);

Javascript 相关文章推荐
javascript基础的动画教程,直观易懂
Jan 10 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
来自国外的页面JavaScript文件优化
Dec 08 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 #Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 #Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 #Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 #Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 #Javascript
JavaScript中的Function函数
Aug 27 #Javascript
jquery带动画效果幻灯片特效代码
Aug 27 #Javascript
You might like
PHP 递归效率分析
2009/11/24 PHP
php数组去重实例及分析
2013/11/26 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
JS中showModalDialog 的使用解析
2013/04/17 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
python调用其他文件函数或类的示例
2019/07/16 Python
Python实现密码薄文件读写操作
2019/12/16 Python
Python龙贝格法求积分实例
2020/02/29 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
2014学雷锋活动总结
2014/03/09 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
公证委托书
2014/08/01 职场文书
党员作风建设整改方案
2014/10/27 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书