移动端滑动插件Swipe教程
前言
最近需要开发一个新的“微信活动平台”，手机端主页需要用到一个幻灯片。因为好一段时间没有全部手写移动端页面了，遂又重新找了一个下有没有什么好的幻灯片插件，毕竟重复造轮子没有必要啊。
综合比较后发现，Swipe 这款插件还是比较不错的，所以这里特地写一篇文章以像大家推荐，并且作为记录，方便下次查看。
简介
Swipe 是一个轻量级的移动滑动组件，这点从文件大小不难看出。它支持 1:1 的触摸移动，阻力以及防滑。单纯从移动端来使用，应该满足基本的需求了。
说明
从github下载后，可以发现，总共就8个文件，其中可能真正项目中用得到的，也基本就是1个 swipe.js 文件。
index.html 和 style.css 本身是作为演示存在的，有兴趣的可以研究一下。
那么我们具体如果使用它呢？很简单，基本只要如下代码即可：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>演示</title>
<!-- 首先引入JQuery -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 引入核心swipe.js文件 -->
<script src="swipe.js"></script>
<!-- 幻灯片基础样式 -->
<style>
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
font-size:140px; /* 这里样式是为了演示方便，我特意加的 */
}
</style>
</head>
<body>
<!-- 幻灯片实例代买，前两层是外围容器 -->
<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<!-- 这三个是幻灯片内容，其中1，2,3等数字可换成图片，样式根据需求更改即可 -->
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<!-- 页面幻灯片运行脚本（初始化） -->
<script>
window.mySwipe = Swipe(document.getElementById('slider'));
</script>
</body>
</html>
以上代码运行结果：
通过鼠标点击或者放到手机上手指滑动，就可以看见幻灯片的运行效果了。当然，当前只是最基本的，全部都是默认配置。我们完全可以通过下面提供的参数，结合自己的需求，自义定出更好的效果来。
startSlide Integer (default:0) - index position Swipe should start at（滑动的索引值,即从*值开始滑动，默认值为0）
speed Integer (default:300) - speed of prev and next transitions in milliseconds.（滑动的速度，默认值300毫秒）
auto Integer - begin with auto slideshow (time in milliseconds between slides)（自动滑动，单位为毫秒）
continuous Boolean (default:true) - create an infinite feel with no endpoints（是否循环滑动，默认值为true）
disableScroll Boolean (default:false) - stop any touches on this container from scrolling the page（停止任何触及此容器上滚动页面，默认值flase）
stopPropagation Boolean (default:false) - stop event propagation（停止事件传播,默认值flase）
callback Function - runs at slide change.（回调函数）
transitionEnd Function - runs at the end slide transition.（滑动过渡时调用的函数）
下面就是官方给的演示例子：
window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 2,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});
从中我们不难看出具体参数的使用方法和位置。这一个如果感兴趣，可以根据需要，自己加入参数试试，都是以json对象存在于Swipe的第二个参数的。
那么除了以上参数，Swipe还提供了一些常用的方法（API）:
prev() slide to prev（上一页）
next() slide to next（下一页）
getPos() returns current slide index position（获取当前索引位置）
getNumSlides() returns the total amount of slides（获取所有滑块总数）
slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)（指数，持续时间）滑动设置索引位置（持续时间：转型速度以毫秒为单位）
都是一些简单的接口方法，你可以Js调用他们以达到你想要的效果。
相关推荐
-
Android ListView滑动删除操作（SwipeListView）
新版本的微信和QQ上引入的滑动删除功能是现在比较流行的一个功能.其实这个滑动删除的控件,github上已经有了,是一个热门的开源框架SwipeListView.不过,这个SwipeListView是一个framelayout,即是一个两层的布局,上面的布局front覆盖了下面的布局back,滑动的时候则会滑开front,这样下面的back就显示出来了.但是看了一下微信的滑动删除好像不是这样的,感觉更像是一个超出了屏幕的单层布局,滑动的时候是右边超出屏幕的button进入屏幕,猜测应该不是使用Sw
-
Android使用SwipeListView实现类似QQ的滑动删除效果
QQ的滑动删除效果很不错,要实现这种效果,可以使用SwipeListView. 1. 下载com.fortysevendeg.swipelistview这个项目(以前GitHub上有,现在GitHub上没有了,百度了很多次才下载到的),导入Eclipse,右键单击,选择Properties->Android,选中Library下面的IsLibrary. 2. 新建一个项目MySwipeListView,加入SwipeListView这个库. 3. 在主窗体里面放入一个SwipeListView控
-
Android仿微信列表滑动删除 如何实现滑动列表SwipeListView
接上一篇,本篇主要讲如何实现滑动列表SwipeListView. 上篇完成了滑动控件SwipeItemView,这个控件是一个自定义的ViewGroup,作为列表的一个item,为列表提供一些方法让这个SwipeItemView能滑动其视图内容,同时滑动过程中会有顺滑的动画效果.而本篇讲的SwipeListView则是这个列表的具体实现了.当然啦,这个SwipeListView继承自ListView,为了实现我们需要的功能,重点就是重写ListView的onTouchEvent()以及onInt
-
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
本文为大家分享了jquery.touchSwipe左右滑动和垂直滚动条冲突问题的解决方法,具体内容如下 正好需要Html5做一个左右可以切换的功能,但是要保留上下滚动条功能.我在移动端使用的jquery.touchSwipe插件,上网找了好久没有看到对应的解决方式,只能自己修改了,最后是能用了. 先上个图: 解决方式是,我把左右滚动的事件添加到了Body上面,而上下活动的使用了DIV的垂直滚动.上代码: $("#body").swipe( { fingers:'all', swipeL
-
详解SwipeListView框架实现微信\QQ滑动删除效果
QQ或者微信出现过滑动,最近联系人列表,可以删去当前选中的联系人,这个功能很棒. 就是试着做了下.其实是使用了开源框架SwipeListView . SwipeListView 与一般的ListView使用方式差不多,只是增加了一些特殊功能. <com.fortysevendeg.swipelistview.SwipeListView xmlns:swipe="http://schemas.android.com/apk/res-auto" android:id="@+
-
移动端滑动插件Swipe教程
前言 最近需要开发一个新的"微信活动平台",手机端主页需要用到一个幻灯片.因为好一段时间没有全部手写移动端页面了,遂又重新找了一个下有没有什么好的幻灯片插件,毕竟重复造轮子没有必要啊. 综合比较后发现,Swipe 这款插件还是比较不错的,所以这里特地写一篇文章以像大家推荐,并且作为记录,方便下次查看. 简介 Swipe 是一个轻量级的移动滑动组件,这点从文件大小不难看出.它支持 1:1 的触摸移动,阻力以及防滑.单纯从移动端来使用,应该满足基本的需求了. 说明 从github下载后,可
-
移动端触摸滑动插件swiper使用方法详解
Swiper是移动端的一款非常强大的触摸滑动插件,下面代码只展示一些常用的配置,具体可以查看官网api <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="swiper.min.cs
-
关于实现Vue3版抖音滑动插件踩坑指南
目录 起步 调研 实现思路 工程构建 代码实现 video实现 slide.vue 组合使用 视频自动播放问题 git地址 总结 起步 年前单位需要搞一个类似抖音的需求,这本应是客户端的任务,然而,不知天高地厚的我却接了下来,然而下细致调研之下,发现网上并没有成熟的方案,但是却又很多需求,各大论坛全是提问的帖子,却少有人回答和解决. 这一瞬间,俺慌了,毕竟单位的活,排期都是定死的,这时候临阵退缩,实乃下下策.于是只能撸起袖子加油干.毕竟自己揽的事,含着泪也要干完,这就是男人,一个吐沫一个钉! 调
-
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
轮播图可以通过点击按钮来跳到上一张或者下一张,在移动端我们常用的就是通过滑动来实现一些时间,那么如何实现呢. 以下是通过bootstrap的Carousel和dropload.js(移动端上下拉动刷新插件)的实现方法. HTML部分 <div id="goods_lunbo" style="width:200%;overflow:hidden;margin-left:-50%;"> <div id="goods_lunbo2"
-
详解PyCharm安装MicroPython插件的教程
前言 PyCharm可以说是当今最流行的一款Python IDE了,大部分购买TPYBoard的小伙伴都会使用PyCharm编写MicroPython的程序.遗憾的是,只是把PyCharm当做了一种代码编辑器,调试依然还的需要其他辅助软件,比如PuTTY.其实最近也有不少小伙伴询问PyCharm中怎么安装MicroPython插件的问题,想着正好网站也缺少这部分的教程,不如实践一下总结下经验共享给大家,也好给爱好MicroPython的小伙伴提供便利. 准备工作 硬件要求 - TPYBoard
-
vue2.0移动端滑动事件vue-touch的实例代码
Vue-touch的使用 有时候我们不止需要有返回键,也要有手势滑动切换页面的功能时,这个时候vue-touch就派上用场了 API地址: https://github.com/vuejs/vue-touch/tree/next 安装 npm insall vue-touch@next --save //main.js中引入: import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'}) 用法如下: //html代码
-
IDEA使用Docker插件(菜鸟教程)
目录 说明 一.开启Docker远程访问 二.连接docker 三.镜像的拉取 四.容器的创建与运行 五.docker一键部署springboot项目 可能的错误: 说明 之前docker的学习,包括镜像拉取,容器创建等操作都需要自己手动敲命令来实现,但是如果在idea中使用Docker插件,就可以不用敲命令也可以实现对docker的操作,不得不说idea这个工具是真的强!!!本文会持续更新,不断地扩充 本文仅为记录学习轨迹,如有侵权,联系删除 注意:一般是用的服务器,作为测试这里就采用虚拟机+
-
一款好用的移动端滚动插件BetterScroll
目录 让滚动更流畅 BetterScroll 的滚动体验 惯性滚动 边缘回弹 如何应用于各种需求场景 普通滚动列表 滚动条 下拉刷新 上拉加载 选择器 轮播图 特殊场景 索引列表 开屏引导 自由滚动 小结 作者:滴滴webapp架构组-付楠 BetterScroll是一款重点解决移动端各种滚动场景需求的开源插件(GitHub地址),适用于滚动列表.选择器.轮播图.索引列表.开屏引导等应用场景. 为了满足这些场景,它不仅支持惯性滚动.边界回弹.滚动条淡入淡出等效果的灵活配置,让滚动更加流畅,同时还
-
原生javascript移动端滑动banner效果
本文实例为大家分享了移动端滑动banner效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,
-
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
分享一款基于jQuery超级酷动画滑动插件.这是一款基于jquery.pogo-slider插件实现的多个滑块切换特效.效果图如下,如果大家觉得还不错,很满意可以下载源码哦. 效果展示 源码下载 实现的代码. html代码: <div class="pogoSlider" id="js-main-slider"> <div class="pogoSlider-slide" data-transition="sl