在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用。
它是一个纯javascript工具,不需要跟其它js库一起导入,同时兼容jQuery和zepto,压缩版的大小只有6kb很适合移动端的开发,它的git地址:
在git上对其的使用方式介绍的相当清楚,关键代码如下
在移动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):滑动方法
zepto中的swipeUp,swipeDown不起效果
我正在看zepto,然后看到里面一些事件的时候发现一个问题:
在移动端swipeUp,swipeDown不起效果,另外几个有效,是怎么回事呢?
zepto要引入 touch.js模块 官网上是没有的 去github下载 然后引入 touch.js即可
是因为阻止了浏览器默认的下拉事件,加上下面一段代码。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。