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 相关文章推荐
28个JS验证函数收集
Mar 02 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
js去除空格的12种实用方法
Nov 08 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
vuex存储token示例
Nov 11 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
javascript中正则表达式语法详解
Aug 07 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
php5.2时间相差8小时
2007/01/15 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
jquery cookie插件代码类
2009/05/26 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
setTimeout学习小结
2017/02/08 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
Python grpc超时机制代码示例
2020/09/14 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
四年大学生活的自我评价范文
2014/02/07 职场文书
司法局火灾防控方案
2014/06/05 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
小学英语课教学反思
2016/02/15 职场文书
年终工作总结范文
2019/06/20 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang