用zepto显示类似微信上下翻页的实现代码

demo预览：
http://skyweaver213.github.io/slide/widget/slide1/slide.html
http://skyweaver213.github.io/slide/widget/slide2/slide.html
http://skyweaver213.github.io/slide/widget/slide3/slide.html

slide

这是一个微信里经常看到的翻页效果。
demo1和demo2效果是一样的，没有吸附功能。
demo1和demo2区别就是demo1是1个大容器里tranlateY处理， demo2是分开每一个页面单独处理。
demo1的写法如果增加一页或者减少一页对css的影响比较大，但是demo1的性能应该是最好的。
demo2单独对当前page和上一个page或下一个page处理，增加或减少一页对css和js也影响不大。但是性能应该没有demo1好。
demo3是带吸附功能的,用transition实现的，性能方面我觉得会比jq的animate效果要好。
第一个github项目 谢谢围观 ^ ^。

widget

widget目录是封装好的插件

slide1是不带吸附功能的(为了好扩展性用了demo2的方法，单独对每个page处理)

slide2是带吸附功能的，用法的灰常简单，只需要调用一个方法传几个参数

slide3是带吸附功能的水平滑动翻页效果

widget1的用法：

例如：
/* slide_page_wrap //滑动区域的class或者 id， 必传
slide_page_dom //滑动页面的class或者 id， 必传
page_count //一共滑动的页面的总个数 不必传（不传默认是page_dom.length）
startCallback: //touchStart的回调函数 不必传
moveCallback: //touchmove的回调函数 不必传
endCallback: //touchend的回调函数 不必传
*/

//调用滑动效果slide({    slide_page_wrap: '.slide_div',   //滑动区域的class或者 id，    必传    slide_page_dom: '.slide_page',  //滑动页面的class或者 id，    必传    page_count: 4,                     //一共滑动的页面的总个数     不必传 （不传默认是page_dom.length）    //touchStart的回调函数    startCallback: function(scope) {        console.log('touch start', scope);    },    //touchmove的回调函数    moveCallback: function(scope) {        console.log('touch move', scope);    },    //touchend的回调函数    endCallback: function(scope) {        console.log('touch end', scope);    }});

widget2（垂直方向滑动）,和widget3(水平方向滑动)都是带吸附的，用法一致。

/* slide_page_wrap //滑动区域的class或者 id， 必传 
slide_page_dom //滑动页面的class或者 id， 必传 
page_count //一共滑动的页面的总个数 不必传（不传默认是page_dom.length） 
slide_range //触发翻页效果移动的步长 不必传 
startCallback: //touchStart的回调函数 不必传 
moveCallback: //touchmove的回调函数 不必传 
endCallback: //touchend的回调函数 不必传 
*/

//调用滑动效果slide({    slide_page_wrap: '.slide_div',   //滑动区域的class或者 id，    必传    slide_page_dom: '.slide_page',   //滑动页面的class或者 id，    必传    page_count: 4,                      //一共滑动的页面的总个数     不必传 （不传默认是page_dom.length）    slide_range: 150,                   //触发翻页效果移动的步长    不必传    //touchStart的回调函数    startCallback: function(scope) {        console.log('touch start', scope);    },    //touchmove的回调函数    moveCallback: function(scope) {        console.log('touch move', scope);    },    //touchend的回调函数    endCallback: function(scope) {        console.log('touch end', scope);    }});

//后续添加轮播更新

github：https://github.com/skyweaver213/slide

用widget里面的接口，很好用，只是用的zepto，暂时还没有找到和jQuery兼容的方法，可以尝试用jQuery写一下，得看看jq对于touchmove支持的程度，zepto是一个轻量级主要面向移动端的jQuery。