|
在需要移动的vue文件中引入横向滑动需要的方法，主要是在滚动的盒子上添加鼠标事件。
代码如下：
/**
* @description: 横向滚动的js代码
*/
move() {
let doc = document;
let html = doc.querySelector(".bottom");
let content = doc.querySelector(".content");
// 禁止选中文字
doc.onselectstart = function () {
return false;
};
let startScroll = 0;
let startX = 0;
let previousX = 0; // 保存上一次的clientX坐标
let currentX = 0; // 获取每次移动的位置
let velocity = 0; // 控制速度
let direction = 0; // 控制左右滑动
let momentum = 0.875; // 控制滑动距离
let momentumInterval = null;
let velocityInterval = null;
/**
* 鼠标移动事件
**/
function f(event) {
// 获取每次移动的位置
currentX = event.clientX;
html.scrollLeft = startScroll + (startX - currentX);
}
/**
* 鼠标离开.content
**/
content.onmouseleave = function () {
/**
* 移除.content的鼠标移动事件
* @see f
**/
content.removeEventListener("mousemove", f);
};
/**
* 鼠标点击事件
**/
content.onmousedown = function (event) {
startScroll = html.scrollLeft;
startX = event.clientX;
previousX = startX;
currentX = startX;
clearInterval(velocityInterval);
velocityInterval = setInterval(function () {
// previousX保存上一次移动鼠标的clientX值
// 慢速移动时currentX与previousX数值相同或者差值较小（慢速移动鼠标一直在一个点上）
// 快速滑动时鼠标左滑previousX大于currentX，右滑currentX大于previousX
// 原理：当快速移动时，松开鼠标的时候已经不在当时点击的点位上，50毫秒后就出现了2个变量的数值差
// 原因：鼠标移动时，不会存储所有的移动信息。尤其是在快速移动鼠标时
velocity = Math.abs(currentX - previousX);
// 正负数转换用于控制左右滑动
// 左滑动为正数，右滑动为负数
direction = currentX > previousX ? -1 : 1;
previousX = currentX;
}, 50);
/**
* .content添加鼠标移动事件
* @see f
**/
this.addEventListener("mousemove", f);
};
/**
* 松开鼠标事件
**/
content.onmouseup = function () {
let num = 0;
clearInterval(velocityInterval);
clearInterval(momentumInterval);
num = velocity;
// 鼠标松开后开始执行滑动
momentumInterval = setInterval(function () {
// 滑动距离
// 滑动距离依次减小
html.scrollLeft = html.scrollLeft + num * direction;
// 数值依次减小
num *= momentum;
// 小于1销毁定时器，滑动结束
if (Math.abs(num) < 1) {
clearInterval(momentumInterval);
}
}, 15);
/**
* 移除.content的鼠标移动事件
* @see f
**/
content.removeEventListener("mousemove", f);
};
},
复制代码
凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数
|