Vue.js自定义垂直/水平滚动条组件|vue模拟滚动条

分类：uni-app

vue.js

介绍

VScroll滚动条基于vuejs2.x构建的美化XY轴滚动条组件。支持原生滚动条、鼠标移出是否隐藏滚动条、自定义滚动条尺寸、颜色及层级等功能。拥有漂亮且流畅的滚动体验！

vue.js仿饿了么滚动条组件|vue自定义滚动条

参数配置

props: {  
    // 是否显示原生滚动条  
    native: Boolean,  
    // 是否自动隐藏滚动条  
    autohide: Boolean,  
    // 滚动条尺寸  
    size: { type: [Number, String], default: '' },  
    // 滚动条颜色  
    color: String,  
    // 滚动条层级  
    zIndex: null  
},

快速引入

在main.js中引入组件。

import VScroll from './components/vscroll';  
Vue.use(VScroll);

使用组件

<!-- 支持原生滚动条 -->  
<v-scroll native>  
    <img src="https://cn.vuejs.org/images/logo.png" />  
    <p>这里是自定义内容。这里是自定义内容。这里是自定义内容。</p>  
</v-scroll>  

<!-- 参数配置 -->  
<v-scroll autohide size="15" color="#00a1e0" zIndex="2021">  
    <img src="https://cn.vuejs.org/images/logo.png" />  
    <p>这里是自定义内容。这里是自定义内容。这里是自定义内容。</p>  
</v-scroll>

实现过程

// vscroll模板  
<template>  
  <div class="vui__scrollbar" ref="ref__box" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" v-resize="handleResize">  
    <div :class="['vscroll__wrap', {native: native}]" ref="ref__wrap" @scroll="handleScroll">  
      <div class="vscroll__view" v-resize="handleResize"><slot /></div>  
    </div>  
    <!-- //水平|垂直滚动条 -->  
    <div :class="['vscroll__bar vertical', {ishide: !isShow}]" @mousedown="handleClickTrack($event, 0)" :style="{'width': parseInt(size)>=0 ? parseInt(size)+'px' : '', 'z-index': parseInt(zIndex)>=0 ? parseInt(zIndex) : ''}">  
      <div class="vscroll__thumb" ref="ref__barY" :style="{'background': color, 'height': barHeight+'px'}" @mousedown="handleDragThumb($event, 0)"></div>  
    </div>  
    <div :class="['vscroll__bar horizontal', {ishide: !isShow}]" @mousedown="handleClickTrack($event, 1)" :style="{'height': parseInt(size)>=0 ? parseInt(size)+'px' : '', 'z-index': parseInt(zIndex)>=0 ? parseInt(zIndex) : ''}">  
      <div class="vscroll__thumb" ref="ref__barX" :style="{'background': color, 'width': barWidth+'px'}" @mousedown="handleDragThumb($event, 1)"></div>  
    </div>  
  </div>  
</template>

/**  
 * @Desc     VueJs虚拟滚动条组件VScroll  
<script>  
  import domUtils from './utils/dom'  
  export default {  
    props: {  
      // 显示原生滚动条  
      native: Boolean,  
      // 自动隐藏滚动条  
      autohide: Boolean,  
      // 滚动条尺寸  
      size: { type: [Number, String], default: '' },  
      // 滚动条颜色  
      color: String,  
      // 滚动条层级  
      zIndex: null  
    },  
    data() {  
      return {  
        barWidth: 0,            // 滚动条宽度  
        barHeight: 0,           // 滚动条高度  
        ratioX: 1,              // 滚动条水平偏移率  
        ratioY: 1,              // 滚动条垂直偏移率  
        isTaped: false,         // 鼠标光标是否按住滚动条  
        isHover: false,         // 鼠标光标是否悬停在滚动区  
        isShow: !this.autohide, // 是否显示滚动条  
      }  
    },  
    mounted() {  
      this.$ref__box = this.$refs.ref__box  
      this.$ref__wrap = this.$refs.ref__wrap  
      this.$ref__barY = this.$refs.ref__barY  
      this.$ref__barX = this.$refs.ref__barX  
      this.$nextTick(this.updated)  
    },  
    // ...  
    methods: {  
      // 鼠标移入  
      handleMouseEnter() {  
        this.isHover = true  
        this.isShow = true  
        this.updated()  
      },  

      // 鼠标移出  
      handleMouseLeave() {  
        this.isHover = false  
        this.isShow = false  
      },  

      // 拖动滚动条  
      handleDragThumb(e, index) {  
        let _this = this  
        this.isTaped = true  
        let c = {}  

        domUtils.isIE() ? (e.returnValue = false, e.cancelBubble = true) : (e.stopPropagation(), e.preventDefault())  
        document.onselectstart = () => false  

        if(index == 0) {  
          c.dragY = true  
          c.clientY = e.clientY  
        }else {  
          c.dragX = true  
          c.clientX = e.clientX  
        }  

        domUtils.on(document, 'mousemove', function(evt) {  
          if(_this.isTaped) {  
            if(c.dragY) {  
              _this.$ref__wrap.scrollTop += (evt.clientY - c.clientY) * _this.ratioY  
              _this.$ref__barY.style.transform = `translateY(${_this.$ref__wrap.scrollTop / _this.ratioY}px)`  
              c.clientY = evt.clientY  
            }  
            if(c.dragX) {  
              _this.$ref__wrap.scrollLeft += (evt.clientX - c.clientX) * _this.ratioX  
              _this.$ref__barX.style.transform = `translateX(${_this.$ref__wrap.scrollLeft / _this.ratioX}px)`  
              c.clientX = evt.clientX  
            }  
          }  
        })  
        domUtils.on(document, 'mouseup', function() {  
          _this.isTaped = false  

          document.onmouseup = null;  
          document.onselectstart = null  
        })  
      },  

      // 滚动槽  
      handleClickTrack(e, index) {  
        console.log(index)  
      },  

      // 更新滚动  
      updated() {  
        if(this.native) return  

        // 垂直滚动条  
        if(this.$ref__wrap.scrollHeight > this.$ref__wrap.offsetHeight) {  
          this.barHeight = this.$ref__box.offsetHeight **2 / this.$ref__wrap.scrollHeight  
          this.ratioY = (this.$ref__wrap.scrollHeight - this.$ref__box.offsetHeight) / (this.$ref__box.offsetHeight - this.barHeight)  
          this.$ref__barY.style.transform = `translateY(${this.$ref__wrap.scrollTop / this.ratioY}px)`  
        }else {  
          this.barHeight = 0  
          this.$ref__barY.style.transform = ''  
          this.$ref__wrap.style.marginRight = ''  
        }  

        // 水平滚动条  
        ...  
      },  

      handleResize() {  
        // 更新滚动条状态  
      },  

      // ...  
    }  
  }  
</script>

vue中directives指令函数监听DOM变化。

// 监听元素/DOM尺寸变化  
directives: {  
    'resize': {  
        bind: function(el, binding) {  
            let width = '', height = '';  
            function get() {  
            const elStyle = el.currentStyle ? el.currentStyle : document.defaultView.getComputedStyle(el, null);  
            if (width !== elStyle.width || height !== elStyle.height) {  
                binding.value({width, height});  
            }  
            width = elStyle.width;  
            height = elStyle.height;  
            }  
            el.__vueReize__ = setInterval(get, 16);  
        },  
        unbind: function(el) {  
            clearInterval(el.__vueReize__);  
        }  
    }  
}