Vue.js 桌面端虚拟滚动条|vue美化滚动条VScroll

介绍

VScroll 一款基于vue2.x构建的桌面PC端自定义模拟滚动条组件。支持自定义是否原生滚动条、自动隐藏、滚动条大小、层级及颜色等功能。拥有丝滑般的原生滚动条体验！

除了垂直滚动条，同样的也支持水平滚动条。

使用起来非常简单，只需 即可快速生成一个虚拟的模拟滚动条。

参数配置

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

快速开始

在main.js中引入滚动条组件。

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

使用组件

    
    
这里是自定义内容。这里是自定义内容。这里是自定义内容。

 


    
    
这里是自定义内容。这里是自定义内容。这里是自定义内容。

编码实现

vscroll自定义滚动条模板。

/**
 * @Desc     VueJs虚拟滚动条组件VScroll
 * @Time     andy by 2020/11/30
 * @About    Q：282310962  wx：xy190310
 */

vue.js中如何监听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__);
        }
    }
},

    
    

    

    
这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！

 
// 监听滚动事件
handleScroll(e) {
    this.scrollTop = e.target.scrollTop
    // 判断滚动状态
    if(e.target.scrollTop == 0) {
        this.scrollStatus = '到达顶部'
    } else if(e.target.scrollTop + e.target.offsetHeight >= e.target.scrollHeight) {
        this.scrollStatus = '到达底部'
    }else {
        this.scrollStatus = '滚动中....'
    }
}

小伙伴们如果感兴趣也可以去捣鼓一下哈，如果有其它好的方法，欢迎交流讨论。
好了，基于vue.js开发模拟滚动条组件就介绍到这里。希望能喜欢~~✍✍

Vue+PC桌面端自定义弹窗组件VLayer