用zepto去写微场景

之前用swiper写了微场景 确实比较容易 但是要是想做的个性一点 就得去官网多扣扣它的API接口了 之后用了zepto 可以较原生的开发微场景 zepto它的语法比较像jq 用起来还是比较轻松的 然而如果是第一次去用 还是有一些坑的

1.原理： 其实和经常写的轮播图很像 只是改为竖着轮播；

2.动画方面 引入animate.css来完成；

3.下载下来的zepto.js默认不带touch.js 这个需要单独去下 然后引入 不然swipeUp  swipeDown事件会无效；

4.经过测试 zepto在谷歌浏览器下 swipeUp  swipeDown 无效 才开始以为是对谷歌的支持度不好 后来了解到 实际原因是这样：

从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。如果在以上这 3 个元素的 touchstart 和 touchmove 事件处理函数中调用 e.preventDefault() ，会被浏览器忽略掉，并不会阻止默认行为。

于是乎 能做的就是 给body加上touch-action: none; 禁止所有的默认事件；这样在谷歌浏览器下 也可以正常滑动了。

5.js方面是这样写 ：

<script>var n=0;var ht=$(window).height();$('body').swipeUp(function(){n++;if(n>5){n==5}else{var s=-n*ht;$('#contain').css('top',s);}})$('body').swipeDown(function(){n--;if(n<0){n=0}else{var s=-n*ht;$('#contain').css('top',s);}})</script>