move(bol){
//div上一次的left位置信息
let position_left_old = parseInt(this.position_left.split('px')[0]);
let countOffset = 0; //点击一次之后总的移动量,用于判断暂停
let speed = 3; //移动速度
let timer = null; //定时器
if(bol){
timer = setInterval(()=>{
if(-630 >= position_left_old || countOffset === 210){
clearInterval(timer);
}else{
countOffset += speed;
this.position_left = `${position_left_old - speed}px`;
//重新获取当前的偏移量,用于下次判断
position_left_old = parseInt(this.position_left.split('px')[0]);
}
}, 10);
}else{
timer = setInterval(()=>{
if(0 <= position_left_old || countOffset === 210){
clearInterval(timer);
}else{
countOffset += speed;
this.position_left = `${position_left_old + speed}px`;
position_left_old = parseInt(this.position_left.split('px')[0]);
}
}, 10);
}
}
当bol===true,向左移动
在html中动态绑定样式 :style="{ left: position_left }"