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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
Vue Element plus使用方法梳理
Dec 24 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图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python Opencv将图片转为字符画
2021/02/19 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
Redis集群的关闭与重启操作
2021/07/07 Redis
Redis分布式锁Redlock的实现
2021/08/07 Redis