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 简单实现前端权限控制的示例
Dec 25 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 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
香妃
2021/03/03 冲泡冲煮
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
python为tornado添加recaptcha验证码功能
2014/02/26 Python
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Python字典遍历操作实例小结
2019/03/05 Python
Python 监测文件是否更新的方法
2019/06/10 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
Python字典dict常用方法函数实例
2020/11/09 Python
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
Java程序员面试90题
2013/10/19 面试题
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
银行反四风对照检查材料
2014/09/29 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
Python Numpy库的超详细教程
2022/04/06 Python
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL