当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue的滚动条插件实现代码

vue的滚动条插件实现代码

2019年09月14日  | 移动技术网IT编程  | 我要评论

这篇文章主要介绍了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网