微信翻页效果

微信翻页效果

今天闲得蛋疼，重构了之前写的微信翻页效果。

先上地址，觉得可以给颗星星，觉得有问题请大力吐槽。

/* 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);

好，代码就上面几行，这么聪明的你肯定一眼就能看懂。 我写的东西木啥深度，先这样吧 ，哈哈。