Vue.js桌面端自定义滚动条组件之美化滚动条VScroll

前言

前段时间有给大家分享一个vue桌面端弹框组件，今天再分享最近开发的一个vue pc端自定义滚动条组件。

vscroll 一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组件。支持是否原生滚动条、鼠标移出是否自动隐藏、自定义滚动条尺寸及颜色等功能。

组件在设计开发之初借鉴了 el-scrollbar 及 vuebar 等组件设计思想。

通过简单的标签写法... 即可快速生成一个漂亮的替换原生滚动条。

参数配置

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

◆ 引入组件

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

import VScroll from './components/vscroll'

Vue.use(VScroll)

◆ 快速使用

** 在使用前需要设置v-scroll外层div容器的宽度或高度。

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




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

◆ 实现过程

vscroll组件目录结构如下：

在vue中如何通过指令directtive函数来监听元素/DOM尺寸变化？

非常简单，写一个轮询自定义指令就行。这里就直接监听滚动区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__);
 }
 }
},

滚动至指定位置

 滚动至顶部
 滚动至底部
 滚动至150px



 
 

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

// 滚动到指定位置
handleScrollTo(val) {
 this.$refs.vscrollRef.scrollTo(val);
},

监听scroll滚动事件

 
 

 

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

// 监听滚动事件
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 = '滚动中....'
 }
},

OK，以上就是基于vue.js实现自定义滚动条组件。希望能对大家有些帮助！

到此这篇关于Vue.js桌面端自定义滚动条组件之美化滚动条VScroll的文章就介绍到这了,更多相关Vue.js美化滚动条VScroll内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！