vue的滚动条插件实现代码


Posted in Javascript onSeptember 07, 2019

这篇文章主要介绍了vue的滚动条插件实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

效果如下

vue的滚动条插件实现代码

代码如下

<template>
  <div class="vue-scroll" ref="vueScrollW">
    <div class="vue-scroll-w" ref="vueScroll" >
      <div class="vue-scroll-c" :style="{width:cWidth}">
        <slot></slot>
      </div>
    </div>
    <div class="vue-scrollbar" v-if="rate < 1">
      <div class="vue-scrollbar-thumb"
      :style="{height:thumbH,top:thumbTop}"
      @mousedown="onmousedown"
      @mouseup="onmouseup"
      ></div>
    </div>
  </div>
</template>
 
<script>
 
 
 
export default {
  name:"vue-scroll",
  data(){
    return {
      thumb:0,
      top:0,
      rate:2,
      moveTop:null,
      isDrag:false,
      cw:10,
      observer:null
    }
  },
  computed:{
    thumbH(){
      return this.thumb + "px";
    },
    thumbTop(){
      return this.top + "px";
    },
    cWidth(){
      return this.cw + "%";
    }
    
  },
  updated(){
    if(!window.MutationObserver){
      this.refresh();
    }
  },
  mounted(){
    var me = this;
    me.$refs.vueScroll.addEventListener("scroll",me.onscroll.bind(me));
    window.addEventListener("mouseup",me.onmouseup.bind(me));
    window.addEventListener("mousemove",me.onmousemove.bind(me));
 
    if(window.MutationObserver){
      //MutationObserver 最低只兼容 ie11
      me.observer = new window.MutationObserver(me.mutationCallback.bind(me));
      me.observer.observe(me.$refs.vueScroll, {
        attributes: true,
        childList: true,
        subtree: true
      });
    }
    
    me.refresh();
  },
  methods:{
    mutationCallback(mutationsList){
      this.refresh();
    },
    onscroll(){
      this.top = this.$refs.vueScroll.scrollTop * this.rate; //计算滚动条所在的高度
      if(this.rate < 1){
        this.eventTrigger(this.top);
      }
    },
    refresh(){
      var me = this;
      var vueScroll = me.$refs.vueScroll;
      var rate = vueScroll.clientHeight / vueScroll.scrollHeight; //滚动条高度的比例,也是滚动条top位置的比例
      me.rate = rate;
      if(rate < 1){
        //需要出现滚动条,并计算滚动条的高度
        me.thumb = rate * vueScroll.clientHeight; //滚动条的 bar 的高度
        //计算出原生的滚动条的宽度
        var w = me.$refs.vueScrollW.clientWidth;
        //根据比例,转换为内容的百分比
        me.cw = w/vueScroll.clientWidth *100;
      }else{
        //不需要出现滚动条
         me.thumb = 0;
         me.cw = 10;
      }
    },
  
    onmousedown(){
      this.isDrag = true;
      this.moveTop = null;
    },
    onmouseup(){
      this.isDrag = false;
    },
    onmousemove(e){
      if(this.isDrag){
        if(this.moveTop !== null){
          var speed = e.screenY - this.moveTop;
          var top = this.top + speed;
          this.scrollThumb(top);
        }
        this.moveTop = e.screenY;
        e.preventDefault();
      }
       
    },
    scrollThumb(top){
      if(top < 0 ){
        top = 0;
         
      }
      if(top > this.$refs.vueScroll.clientHeight-this.thumb){
        top = this.$refs.vueScroll.clientHeight-this.thumb;
         
      }
       
      this.$refs.vueScroll.scrollTop = top/this.rate;
      this.top = top;
    },
    eventTrigger(top){
      if(top === 0){
        this.$emit("reachTop"); //到达顶部
      }
      if(top === this.$refs.vueScroll.clientHeight-this.thumb){
        this.$emit("reachBottom"); //到达底部与
      }
      this.$emit("vuescroll",this.$refs.vueScroll.scrollTop,this.top);//返回内容滚动的高度 和 滚动条所在的高度
    },
    scrollTo(scrollTop){
      //对外的api,滚动的内容的哪里
       this.$refs.vueScroll.scrollTop = scrollTop;
       this.$nextTick(()=>{
         this.onscroll();
       })
    }
  },
  destroyed(){
    var me = this;
    me.$refs.vueScroll && me.$refs.vueScroll.removeEventListener("scroll",me.onscroll.bind(me));
    window.removeEventListener("mouseup",me.onmouseup.bind(me));
    window.removeEventListener("mousemove",me.onmousemove.bind(me));
    me.observer&&me.observer.disconnect();
  }
}
</script>
 
<style lang="scss" scoped>
.vue-scroll{
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  .vue-scroll-w{
    width: 1000%;
    height: 100%;
    overflow: auto;
    .vue-scroll-c{
      position: relative;
      width: 10%;
    }
  }
  .vue-scrollbar{
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: #EEEEEE;
    opacity: 0.6;
    .vue-scrollbar-thumb{
      position: absolute;
      top: 0;
      right: 0;
      width: 4px;
      border-radius: 4px;
      background: #D3D3D3;
      &:hover{
        background: #bbb;
      }
      &:active{
        background: #aaa;
      }
    }
  }
}
</style>

使用

<template>
  <div class="scroll">
    <vueScroll>
      <ul>
        <li v-for="item in 60" :key="item">{{item}}</li>
      </ul>
    </vueScroll>
  </div>
</template>
 
<script>
import vueScroll from "@/components/vue-scroll.vue"
export default {
  data(){
    return {
      count:60
    }
  },
  components:{
    vueScroll
  },
  mounted(){
   
  }
}
</script>
<style lang="less" scoped>
.scroll{
  width: 400px;
  height: 600px;
  margin: 0 auto;
  border: 1px solid red;
  ul{
    li{
      line-height: 30px;
      border-bottom: 1px solid #ddd;
    }
  }
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
js实现简单的计算器功能
Jan 16 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 #Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 #Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 #Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 #Javascript
解决layer.open后laydate失效的问题
Sep 06 #Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 #Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 #Javascript
You might like
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
phalcon框架使用指南
2016/02/23 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
面包屑导航详解
2017/12/07 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
详解Python传入参数的几种方法
2019/05/16 Python
Python八皇后问题解答过程详解
2019/07/29 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
介绍一下except的用法和作用
2015/01/22 面试题
党校自我鉴定范文
2013/10/02 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
道路施工安全责任书
2014/07/24 职场文书
社区创先争优承诺书
2014/08/30 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
支行行长竞聘报告
2014/11/06 职场文书
社区重阳节活动总结
2015/03/24 职场文书
会计主管岗位职责
2015/04/02 职场文书
冰雪公主观后感
2015/06/16 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL