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


Posted in Vue.js onDecember 01, 2020

前言

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

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

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

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

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

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

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

参数配置

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

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

◆ 引入组件

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

import VScroll from './components/vscroll'

Vue.use(VScroll)

◆ 快速使用

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

<!-- 设置原生滚动条 -->
<v-scroll native>
 <img src="https://cn.vuejs.org/images/logo.png" style="max-width:100%;" />
 <p>这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!</p>
</v-scroll>

<!-- 设置自定义参数 -->
<v-scroll autohide size="10" color="#f90" zIndex="2020">
 <img src="https://cn.vuejs.org/images/logo.png" style="max-width:100%;" />
 <p>这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!</p>
</v-scroll>

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

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

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

◆ 实现过程

vscroll组件目录结构如下:

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

<!-- //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>

在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__);
 }
 }
},
/**
 * @Desc vue.js自定义滚动条直接VScroll
 * @Time andy by 2020-11-30
 * @About Q:282310962 wx:xy190310
 */
<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 = ''
 }

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

 // 滚动区元素/DOM尺寸改变
 handleResize() {
 // 更新滚动条状态
 },

 // ...
 }
 }
</script>

滚动至指定位置

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

<p>
 <span class="vs__btn" @click="handleScrollTo('top')">滚动至顶部</span>
 <span class="vs__btn" @click="handleScrollTo('bottom')">滚动至底部</span>
 <span class="vs__btn" @click="handleScrollTo(150)">滚动至150px</span>
</p>

<v-scroll ref="vscrollRef">
 <img src="https://cn.vuejs.org/images/logo.png" style="height:180px;" />
 <p><img src="https://cn.vuejs.org/images/logo.png" style="height:350px;" /></p>
 <p>这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!</p>
</v-scroll>
// 滚动到指定位置
handleScrollTo(val) {
 this.$refs.vscrollRef.scrollTo(val);
},

监听scroll滚动事件

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

<v-scroll @scroll="handleScroll">
 <img src="https://cn.vuejs.org/images/logo.png" style="height:180px;margin-right:10px;" />
 <br />
 <p><img src="https://cn.vuejs.org/images/logo.png" style="height:250px;" /></p>
 <p>这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!</p>
</v-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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 #Vue.js
vue实现表格合并功能
Dec 01 #Vue.js
vue element实现表格合并行数据
Nov 30 #Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 #Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 #Vue.js
详解Vue 的异常处理机制
Nov 30 #Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 #Vue.js
You might like
php事务处理实例详解
2014/07/11 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
再谈JavaScript线程
2015/07/10 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
python3.5的包存放的具体路径
2020/08/16 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
HR喜欢的自荐信格式
2013/10/08 职场文书
高中生的学习总结自我鉴定
2013/10/26 职场文书
好的自荐信包括什么内容
2013/11/07 职场文书
个人党性剖析材料
2014/02/03 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
求职信结尾怎么写
2014/05/26 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
2016公司年会主持词
2015/07/01 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书