用zepto显示类似微信上下翻页的实现代码
2016-01-24 17:15
585 查看
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
这是一个微信里经常看到的翻页效果。
demo1和demo2效果是一样的,没有吸附功能。
demo1和demo2区别就是demo1是1个大容器里tranlateY处理, demo2是分开每一个页面单独处理。
demo1的写法如果增加一页或者减少一页对css的影响比较大,但是demo1的性能应该是最好的。
demo2单独对当前page和上一个page或下一个page处理,增加或减少一页对css和js也影响不大。但是性能应该没有demo1好。
demo3是带吸附功能的,用transition实现的,性能方面我觉得会比jq的animate效果要好。
第一个github项目 谢谢围观 ^ ^。
widget1的用法:
例如:
/* slide_page_wrap //滑动区域的class或者 id, 必传
slide_page_dom //滑动页面的class或者 id, 必传
page_count //一共滑动的页面的总个数 不必传(不传默认是page_dom.length)
startCallback: //touchStart的回调函数 不必传
moveCallback: //touchmove的回调函数 不必传
endCallback: //touchend的回调函数 不必传
*/
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的回调函数 不必传
*/
//后续添加轮播更新
github:https://github.com/skyweaver213/slide
用widget里面的接口,很好用,只是用的zepto,暂时还没有找到和jQuery兼容的方法,可以尝试用jQuery写一下,得看看jq对于touchmove支持的程度,zepto是一个轻量级主要面向移动端的jQuery。
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。
相关文章推荐
- android 微信支付 问题解决
- 微信企业号开发(3)--建立连接(回调)
- Android仿微信主界面设计
- 春节红包:微信、QQ与支付宝的社交、支付攻防战
- 解决微信下拉
- JSAPI微信支付开发流程和坑
- 一个Java写的批量重命名文件小程序
- 微信蓝牙开发板体验和开发指引
- 微信jssdk已无力吐槽
- 微信小店调用api代码示例
- 微信企业号开发(2)--建立连接(主动)
- 模拟微信登陆和获取好友信息
- 使用history.replaceState 控制微信返回
- 微信web开发者工具使用
- iOS 微信 音频 视频自动播放
- pointer-events/H5页面在iphone6 plus的微信上出现闪退
- web 微信一些接口说明
- 关于支付(支付宝和微信)
- 仿微信朋友圈回复弹软
- Android AccessibilityService 应用之微信抢红包外挂