微信翻页效果
今天闲得蛋疼,重构了之前写的微信翻页效果。
先上地址,觉得可以给颗星星,觉得有问题请大力吐槽。
github:https://github.com/skyweaver213/slide
3个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
下面说的东西没啥深度,高手到这里止步哈。 if(codeMaster) return;
然后说说我重构的思路,每次说到重构2字我都手心冒汗,我写的破东西也敢称得上重构?勉强说,再改了一下。
我一开始封装的方法很挫的,就是随便传几个参数
3个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
下面说的东西没啥深度,高手到这里止步哈。 if(codeMaster) return;
然后说说我重构的思路,每次说到重构2字我都手心冒汗,我写的破东西也敢称得上重构?勉强说,再改了一下。
我一开始封装的方法很挫的,就是随便传几个参数
/* param1 滑动页面的class或者 id ------------- (必传) param2 一共几个滑动的页面 ------------- (必传) param3 吸附翻页的范围 ------------- (不必传) param4 滑动页面委托事件的父节点,不传默认是document */ function slide(slide_page_dom, page_count, slide_range, parent_wrap) { //code }
这样我觉得有一点很不好的地方,就是别人一定要记住参数的顺序,还有是否必传 ,还有如果后续参数扩展更多的话,还可能需要判断参数的类型再作操作,例如添加一个callback函数,还要先检查一下是不是函数才能执行。
还有如果touchstart、touchmove和touchend同时都用callback的时候,就乱得一团糟了。
所以今天我把所有参数都当作一个对象,然后跟他们分别指定特定的名字。
例如:
/** * Created by huangjianhua on 14-12-20. */ /* param1 所有用到参数的obj { slide_page_wrap //滑动区域的class或者 id, 必传 slide_page_dom //滑动页面的class或者 id, 必传 page_count //一共滑动的页面的总个数 不必传(不传默认是page_dom.length) slide_range //触发翻页效果移动的步长 不必传 } startCallback: function, //touchStart的回调函数 不必传 moveCallback: function, //touchmove的回调函数 不必传 endCallback: function //touchend的回调函数 不必传 */ function slide(options) { //默认的值 var defaultObj = { cur_page: 0, slide_range: 130, parent_wrap: document }; //自定义的参数 $.extend(defaultObj, options); //滑动区域的class或id var slide_page_wrap = defaultObj.slide_page_wrap; //滑动页面的class或id var slide_page_dom= defaultObj.slide_page_dom; var $slide_page = $(slide_page_dom); //当前滑动的页码,从0开始算 var cur_page= 0; //保存touchstart的事件对象 var touchFirst_obj; //保存touchend的事件对象 var touchLast_obj; //touch事件移动的Y轴距里 var moveY; //touchstart开始时translateY的坐标点 var startTranslateY; //touchmove时translateY的坐标点 var currentTranslateY; //当touchmove大于设置的slide_range触发翻页 var slide_range = +defaultObj.slide_range; //一共滑动总页数 var page_count = defaultObj.page_count || $slide_page.length; //总滑动页面的包裹器 var parent_wrap = defaultObj.parent_wrap; //兼容不支持calc的浏览器 $slide_page.css(‘height‘, (100 / page_count) + ‘%‘); //滑动页面的事件绑定 $(parent_wrap).on(‘touchstart‘, slide_page_wrap, function (e) { //禁止浏览器默认事件 e.preventDefault(); //防止事件冒泡 e.stopPropagation(); touchFirst_obj = { startY : e.touches[0].clientY }; //移除transition的过渡效果 $(this).removeClass(‘transition_fast‘); //取translateY的值 var transfrom_info = window.getComputedStyle(e.currentTarget, null).getPropertyValue("-webkit-transform").match(/matrix\((\d+,\s?){1,5}(\-?\d+)/); startTranslateY = transfrom_info && transfrom_info[2] || 0; $(this).css(‘-webkit-transform‘, ‘translateY(‘+ startTranslateY +‘px) translateZ(0)‘); // console.log(startTranslateY , ‘startY‘,window.getComputedStyle(e.currentTarget, null).getPropertyValue("-webkit-transform")); //touchstart的回调函数 defaultObj.startCallback && defaultObj.startCallback($(this)); }).on(‘touchmove‘, slide_page_wrap, function (e) { e.preventDefault(); e.stopPropagation(); touchLast_obj = e.touches[0]; //计算滑动的移动距里 moveY = touchLast_obj.clientY - touchFirst_obj.startY; currentTranslateY = +startTranslateY + +moveY; //第一张往上、和最后一张往下 return; if((startTranslateY ==0 && moveY > 0) || (startTranslateY == -window.innerHeight * (page_count-1) && moveY < 0)) { return; } $(this).css(‘-webkit-transform‘, ‘translateY(‘+ currentTranslateY +‘px) translateZ(0)‘); //touchmove的回调函数 defaultObj.moveCallback && defaultObj.moveCallback($(this)); }).on(‘touchend‘, slide_page_wrap, function (e) { //添加过渡效果的class $(this).addClass(‘transition_fast‘); //上 或 下 if(moveY > slide_range) { //第一页的话 不作处理 if(cur_page == 0) return; cur_page--; } else if(moveY < -slide_range) { //最后一页的话 return if(cur_page == +page_count-1) return; cur_page++; } $(this).css(‘-webkit-transform‘, ‘translateY(‘+ (-100 * (+cur_page)/page_count) +‘%) translateZ(0)‘); //touchend的回调函数 defaultObj.endCallback && defaultObj.endCallback($(this)); }); }
这里我是先区分哪些是默认值,然后那些是自定义的参数。代码如下,自定义的参数可以覆盖默认的参数。
//默认的值 var defaultObj = { cur_page: 0, slide_range: 130, parent_wrap: document }; //自定义的参数 $.extend(defaultObj, options);
好,代码就上面几行,这么聪明的你肯定一眼就能看懂。 我写的东西木啥深度,先这样吧 ,哈哈。
文章来自:http://www.cnblogs.com/skyweaver/p/4332991.html