点击下面左右按钮的时候,列车可以移动一定的距离;
思路: 设置scrollLeft;我需要获取到它能移动的距离end
需要在trainContent.scrollLeft === end的时候 清除定时,不然移动到最后面的时候定时不清除就有问题
public moveRightTrain(){
const trainContent = this.$el.querySelector('.train');
if (trainContent) {
let stepEnd = trainContent.scrollLeft + this.step;
let end = trainContent.scrollWidth - document.documentElement.clientWidth;
const interval = setInterval(() => {
let ongoingStep = trainContent.scrollLeft + this.itemStep;
if (ongoingStep >= stepEnd || trainContent.scrollLeft === end ) {
window.clearInterval(interval);
}
trainContent.scrollTo(ongoingStep, 0);
}, 10);
}
}
public moveLeftTrain(){
const trainContent = this.$el.querySelector('.train');
if (trainContent) {
let stepEnd = trainContent.scrollLeft - this.step;
if(stepEnd >= 0){
const interval = setInterval(() => {
let ongoingStep = trainContent.scrollLeft - this.itemStep;
if (ongoingStep <= stepEnd) {
window.clearInterval(interval);
}
trainContent.scrollTo(ongoingStep, 0);
}, 10);
}else {
trainContent.scrollLeft = 0;
}
}
}
参考链接
https://blog.csdn.net/weixin_44599931/article/details/122411481
https://blog.csdn.net/dengfengling999/article/details/122725135
https://blog.csdn.net/weixin_46316234/article/details/121694395