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+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue postcss-px2rem 自适应布局
May 15 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 截取字符串专题集合
2010/08/19 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
python列表操作使用示例分享
2014/02/21 Python
python使用cookie库操保存cookie详解
2014/03/03 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
python输出pdf文档的实例
2020/02/13 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
AC Lens:购买隐形眼镜
2017/02/26 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
小学毕业感言150字
2014/02/05 职场文书
2015学校年度工作总结
2015/05/11 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
寒假生活随笔
2015/08/15 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
git stash(储藏)的用法总结
2022/06/25 Servers
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL