来源:自学PHP网 时间:2015-04-14 12:58 作者: 阅读:次
[导读] 今天闲得蛋疼,重构了之前写的微信翻页效果。先上地址,觉得可以给颗星星,觉得有问题请大力吐槽。github:https: github com skyweaver213 slide3个demo地址:http: skyweaver213 github io slide widget...
|
今天闲得蛋疼,重构了之前写的微信翻页效果。 先上地址,觉得可以给颗星星,觉得有问题请大力吐槽。 下面说的东西没啥深度,高手到这里止步哈。 if(codeMaster) return; 然后说说我重构的思路,每次说到重构2字我都手心冒汗,我写的破东西也敢称得上重构?勉强说,再改了一下。 我一开始封装的方法很挫的,就是随便传几个参数
/*
param1 滑动页面的class或者 id ------------- (必传)
param2 一共几个滑动的页面 ------------- (必传)
param3 吸附翻页的范围 ------------- (不必传)
param4 滑动页面委托事件的父节点,不传默认是document
*/
function slide(slide_page_dom, page_count, slide_range, parent_wrap) {
//code
}
这样我觉得有一点很不好的地方,就是别人一定要记住参数的顺序,还有是否必传 ,还有如果后续参数扩展更多的话,还可能需要判断参数的类型再作操作,例如添加一个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);
好,代码就上面几行,这么聪明的你肯定一眼就能看懂。 我写的东西木啥深度,先这样吧 ,哈哈。
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com