使用SwipeJS开发移动WebApp小结

来源：互联网发布：mysql 复杂语句大全编辑：程序博客网时间：2024/05/08 07:34

Swipe JS 是一个轻量级的移动滑动组件，支持 1:1 的触摸移动，阻力以及防滑性能都不错，可以让移动web应用展现更多的内容，能解决我们对于移动Web对滑动的需求。

官网：http://www.swipejs.com
github：https://github.com/bradbirdsall/Swipe

　　要实现Swipe的滑动和手势非常简单，仅需要遵循一个简单的规则。下面是一个例子：

<div id='slider' class='swipe'>  <div class='swipe-wrap'>    <div>1</div>    <div>2</div>    <div>3</div>  </div></div>

　　里面包裹的三个DIV即是滑动的模块了，在滑块结束后面或页面底部添加事件代码：

window.mySwipe = Swipe(document.getElementById('slider'));

　　当然添加了事件后我们还需要添加一些基础的样式，以保证滑块能正常工作：

.swipe {  overflow: hidden;  visibility: hidden;  position: relative;}.swipe-wrap {  overflow: hidden;  position: relative;}.swipe-wrap > div {  float:left;  width:100%;  position: relative;}

　　到这里整个滑动效果就制作完成了，赶紧用手机进行测试下吧！

　　Swipe2.0还提供了更多的参数设置：

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.（滑动过渡时调用的函数）

举个带参数设置的栗子：
<script type="text/javascript">
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) {}
});
</script>

　　Swipe2.0提供的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)（指数，持续时间）滑动设置索引位置（持续时间：转型速度以毫秒为单位）

　　与1.0相比较，2.0做出了很多改进，有更多的API设定，相比各种WebApp开发框架，Swipe也有自己的优缺点，

　　优点：

滑动与防滑性能非常不错，用户体验较好
Html结构简单，自定义较灵活

　　缺点：

切换后盒子的高度取决于切换内容最大高度，如果某个盒子无内容，那么会出现一个空白区域
当前选中状态在滑动结束后才激活
混合开发时js代码较为繁琐(http://dtop.powereasy.net/Item.aspx?id=3567)

0 0