<强>写在前面
最近在做移动端方面运用到了饿了么的vue前端组件库,因为不想单纯用组件而使用它,故想深入了解一下实现原理。后续将会继续研究一下其他的组件实现原理,有兴趣的可以关注下。
代码在这里:戳我
<强> 1。说明
父容器子页面
<强> 2。核心解析
2.1页面初始化
由于所有页面都在手机屏幕左侧一个屏幕宽度的位置,因此最开始的情况是页面中看不到任何一个子页面,所以第一步应该设置应该显示的子页面,默认情况下
函数reInitPages () {//得出页面是否能够被滑动//1。子页面只有一个//2。用户手动设置不能滑动noDragWhenSingle=true
noDrag=孩子。长度===1,,noDragWhenSingle;
var aPages=[];
var intDefaultIndex=Math.floor (defaultIndex);
var defaultIndex=(intDefaultIndex祝辞=0,,intDefaultIndex & lt;children.length)
& # 63;intDefaultIndex: 0;//得到当前被激活的子页面索引
指数=defaultIndex;
的孩子。forEach(函数(孩子,指数){
aPages.push(孩子);//所有页面移除激活类
child.classList.remove(“活跃”);
如果(指数===defaultIndex) {//给激活的子页面加上激活类
child.classList.add(“活跃”);
}
});
页面=aPages;
}
之前
2.2容器滑动开始(onTouchStart)
在低版本的手机上,设置会起到一定的性能提升作用,使得滑动起来不是那么卡。
前置工作:
<李>如果用户设置了防止:真的,滑动时阻止默认行为李
<李>如果用户设置了stopPropagation:真的,滑动时阻止事件向上传播李
<李>如果动画尚未结束,阻止滑动李
<李>设置拖:真的,滑动开始李
<李>设置用户滚动为假
李
滑动开始:
使用一个全局对象记录信息,这些信息包括:
dragState={
开始时间//开始时间
startLeft//开始的X坐标
startTop//开始的Y坐标(相对于整个页面视窗pageY)
startTopAbsolute//绝对Y坐标(相对于文档顶部clientY)
pageWidth//一个页面宽度
pageHeight//一个页面的高度
prevPage//上一个页面
dragPage//当前页面
全心全意地//下一个页面
};
之前
2.3容器滑动(onTouchMove)
套用全局,记录新的信息
dragState={
currentLeft//开始的X坐标
currentTop//开始的Y坐标(相对于整个页面视窗pageY)
currentTopAbsolute//绝对Y坐标(相对于文档顶部clientY)
};
那么我们就可以通过开始和滑动中的信息来计算出一些东西:
滑动的水平位移(offsetLeft=currentLeft - startLeft)
滑动的垂直位移(offsetTop=currentTopAbsolute - startTopAbsolute)
是否是用户的自然滚动,这里的自然滚动说的是用户并不是想滑动偷窃者,而是想滑动页面
//条件//distanceX=Math.abs (offsetLeft);//distanceY=Math.abs (offsetTop);
distanceX & lt;5 | | (distanceY祝辞=5,,distanceY祝辞=1.73 * distanceX)
之前
判断是左移还是右移(offsetLeft & lt;0左移,反之,右移)
重置位移
//如果存在上一个页面并且是左移
如果(dragState。prevPage,,对==='上一页'){//重置上一个页面的水平位移为offsetLeft——dragState.pageWidth//由于offsetLeft一直在变化,并且在0//那么也就是说offsetLeft——dragState。pageWidth的值一直在变大,但是仍未负数//这就是为什么当连续属性存在的时候左滑会看到上一个页面会跟着滑动的原因//这里的翻译方法其实很简单,在滑动的时候去除了动画效果“过渡”,单纯改变位移//而在滑动结束的时候,加上“转型”,使得滑动到最后释放的过渡更加自然
翻译(dragState。prevPage offsetLeft - dragState.pageWidth);
}//当前页面跟着滑动
翻译(dragState。dragPage offsetLeft);//后一个页面同理
如果(dragState。全心全意地,,对===皀ext”) {
翻译(dragState。全心全意地,offsetLeft + dragState.pageWidth);
}
之前
2.4滑动结束(onTouchEnd)
