脚本宝典收集整理的这篇文章主要介绍了vue滑动内容实现横向滑动滚动条效果，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

一、这个滑动可能存在一点小问题，因为这个再项目中使用率不高，所以我没进行仔细测试。 代码中的起名有点错位，这里懒得改了。废话不多少，直接上代码。

<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>

脚本宝典总结

以上是脚本宝典为你收集整理的vue滑动内容实现横向滑动滚动条效果全部内容，希望文章能够帮你解决vue滑动内容实现横向滑动滚动条效果所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。