开发者学堂课程【移动 Web 前端开发：分类页-左侧的滑动】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8434
分类页-左侧的滑动
一、左侧的滑动
接下来实现第一块效果，左侧的滑动，其实在原生的移动端可以使用滚动条，但使用原生滚动条的效果体验比较不好。
接下来具体实现左侧滚动，在category.js 中编写：
/**ITCAST WEB**/
window.onloadn = function(){
//这个页面有两个功能要实现。
/*左侧滑动*/
leftSwipe();//左侧滑动起名。
/*右侧滑动*/
rightSwipe();右侧滑动起名。
//在做前端项目实际时 Swipe 是滑动的意思。
};
var leftSwipe = function(){//下定义。分别为左侧栏和右侧栏。
//做这个页面主要是为了推荐一个插件。并不是为了来实现滑动。下面现在实现下滑动功能。
/*
*1.上下的滑动（ touch 事件，位移）
//上下滑动很简单，需结合 touch 相关事件，不需要过度，加位移就可以了。肯定是需结合父元素中的子元素，因为它是不可分割的部分。
**/
/*需要操纵到哪些元素？拿到父元素中的子元素。*/
var parentBox = document.querySelector(‘.cate_left’);
/*看结构找到 cate_left*/
//这就找到了父容器。
var childBox = parentBox.uerySelector(‘ul’);
//这是找到了子容器。
/*给子容器绑定事件组合*/
/*上下滑动记录y轴方向*/
var startY = 0；
var distanceY = 0;
/*程序的核心点*/
/*核心是当前移动的定位，下此移动是以当前定位来做。*/
var currentY = 0;/*用于记录当前定位*/
//currentY 记录当前定位加上这次改动的距离，就是当前将要去做的位置。
childBox.addEventlListener(‘touchstart’,function(e){
//这是绑定事件组合。
startY = e.touches[0].clientY;
//上下滑动应该记录什么？应该记录 Y 轴的坐标。记录上下滑动的距离。然后再取出e，相关原理之后讲解。/*记录Y轴的改变*/
});
/*加move*/
//
childBox.addEventlListener(‘touchmove’,function(e){
var moveY = e.touches[0].clientY;
distanceY = move - startY;
//记录上下的位移，需要记录上下滑动的起始点和结束点。
console.log(distanceY)//打印distanceY。
/*将要去做定位的位置*/
var translateY = currentY + distanceY;
//点击测试页面分析，往上滑动为负，往下滑动为正。这样理解滑动是没有问题的。但是做完之后会有一个问题，还缺少一个程序的核心点。所有的功能都是根据index来写的。如果要记录滑动，那么这样有一个记录当前定位的变量。如果不记录当前的滑动点，那么下次滑动还是会从0开始。所以当前程序的核心点就是当前的定位。下一点定位也需要根据当前的定位来做，加上 distanceY。
/*上次位置，加上现在的改变位置*/
childBox.style.transform = ‘translateY(‘+translateY’ + ‘px’)’;
childBox.style.wedkitTransform=‘translateY(‘+translateY’ + ‘px’)’;
/*实现位移*/
});
/*加end*/
/*分析上下滑动移动的坐标值*/
/*需要有一个定位当前坐标的变量*/
/*定位当前的滑动位置，避免下次滑动又从初始开始滑动*/
childBox.addEventlListener(‘touchend’,function(e){
//当手指离开后也需要记录当前位置。下次移动会以此为参考。如果不记录，下次滑动就会以0为移动的开始。
/*滑动完成之后记录位置*/
currentY = currentY + distanceY;
/*记录鼠标位置*/
/*如果不记录滑动位置，下次滑动又会从弹回初始位置开始*/
});
}
//上面这样做也实现的滑动功能，但并不完美。
current 和 index 功能相同，index 是确定当前定位的 current 也是确定当前定位的。所以回到 category.css 修 改 index：
z-index : 999;
