一、这个滑动可能存在一点小问题，因为这个再项目中使用率不高，所以我没进行仔细测试。
代码中的起名有点错位，这里懒得改了。废话不多少，直接上代码。
<template>
<div>
<div class="grand">
<div class="parent"
@mousedown="handlemouse">
随便搜一篇满分作文，好看滑动效果
永恒之于我是整个生命，而瞬间之于我是每一刹那的哀伤和翻然悔悟。正是有无数个难忘或是不经意的瞬间，才完整了我的生命。
骤冷的降雪让我有些意外，有些惊喜。但是望着窗外愈加紧凑的雪片，我裹了裹身上单薄的外套继续躲在教室里。
忽然有同学告诉我，说我父母给我送被子来了，正往寝室里去。我高兴地冲了出去，不是因为怕没有厚被子盖被冻，而是父母来了，
</div>
</div>
</div>
</template>
<script>
import url from "../../common/api";
export default {
data(){
return {
isDrag:false,//是否在拖拽
isClick:false,//是否是单击
};
},
methods:{
handlemouse(e){
let startTime,endTime;
let child=document.getElementsByClassName(‘parent‘)[0];
let parent=document.getElementsByClassName(‘grand‘)[0];
// 使用this.$refs.name获取dom元素,可能会获取到vue组件,他不支持获取元素的宽高以及监听鼠标事件
let widthDiffer=parent.offsetWidth - child.offsetWidth;
if(widthDiffer>0){
//如果grand真实宽度比parent宽度长,那么就不用滑动了,直接返回
this.isClick=true;
return
}
startTime=new Date().getTime();//获取事件开始时间
let disx= e.clientX - child.offsetLeft;
this.isDrag=true;//设置开始拖拽
parent.onmousemove =(e)=>{
if(this.isDrag){//拖拽中
let mouseX=e.clientX; // 鼠标点击的位置
let x=mouseX-disx;
// 这里判断是开头和结尾和大盒子对齐
if(x>0){
child.style.left=‘0px‘
}else if(x<-2300){
child.style.left=‘-2300px‘
}else{
child.style.left=x+‘px‘//设置parent的位置
}
}
}
parent.onmouseup=(e)=>{
endTime=new Date().getTime();
let timeDiffer=endTime-startTime;//获取抬起时间
this.isDrag=false;
if(timeDiffer<150){
//时间间隔小于150,那么就判断为单击事件,这里时间间隔可*设置
this.isClick=true;
}else{
this.isClick=false;
//拖拽结束,如果这里parent移出了grand边界,
parent.onmouseout=(ev)=>{
this.isDrag=false;
}
}
}
},
},
mounted(){
}
}
</script>
<style lang="stylus" scoped>
.grand{
height: 60px;
width:700px;
background #f00
position: relative;
overflow: hidden;
}
.parent{
width:3000px;
position: absolute;
background #00f
white-space: nowrap;
}
</style>