Vue.js桌面端自定義滾動條組件之美化滾動條VScroll

更新時間：2020年12月01日 12:02:08 作者：xiaoyan2017

這篇文章主要給大家介紹了關(guān)于Vue.js桌面端自定義滾動條組件之美化滾動條VScroll的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

前段時間有給大家分享一個vue桌面端彈框組件，今天再分享最近開發(fā)的一個vue pc端自定義滾動條組件。

vscroll 一款基于vue2.x開發(fā)的網(wǎng)頁端輕量級超小巧自定義美化滾動條組件。支持是否原生滾動條、鼠標(biāo)移出是否自動隱藏、自定義滾動條尺寸及顏色等功能。

組件在設(shè)計開發(fā)之初借鑒了 el-scrollbar 及 vuebar 等組件設(shè)計思想。

通過簡單的標(biāo)簽寫法<v-scroll>...</v-scroll> 即可快速生成一個漂亮的替換原生滾動條。

參數(shù)配置

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)

◆ 快速使用

** 在使用前需要設(shè)置v-scroll外層div容器的寬度或高度。

<!-- 設(shè)置原生滾動條 -->
<v-scroll native>
 <img src="https://cn.vuejs.org/images/logo.png" style="max-width:100%;" />
 <p>這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！</p>
</v-scroll>

<!-- 設(shè)置自定義參數(shù) -->
<v-scroll autohide size="10" color="#f90" zIndex="2020">
 <img src="https://cn.vuejs.org/images/logo.png" style="max-width:100%;" />
 <p>這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！</p>
</v-scroll>

◆ 實現(xiàn)過程

vscroll組件目錄結(jié)構(gòu)如下：

<!-- //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函數(shù)來監(jiān)聽元素/DOM尺寸變化？

非常簡單，寫一個輪詢自定義指令就行。這里就直接監(jiān)聽滾動區(qū)DOM寬/高變化來動態(tài)更新滾動條狀態(tài)。

// 監(jiān)聽元素/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, // 鼠標(biāo)光標(biāo)是否按住滾動條
 isHover: false, // 鼠標(biāo)光標(biāo)是否懸停在滾動區(qū)
 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: {
 // 鼠標(biāo)移入
 handleMouseEnter() {
 this.isHover = true
 this.isShow = true
 this.updated()
 },

 // 鼠標(biāo)移出
 handleMouseLeave() {
 this.isHover = false
 this.isShow = false
 },

 // 拖動滾動條
 handleDragThumb(e, index) {
 let _this = this
 this.isTaped = true
 let c = {}
 // 阻止默認(rèn)事件
 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)
 },

 // 更新滾動區(qū)
 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 = ''
 }

 // 水平滾動條
 ...
 },

 // 滾動區(qū)元素/DOM尺寸改變
 handleResize() {
 // 更新滾動條狀態(tài)
 },

 // ...
 }
 }
</script>

滾動至指定位置

<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>這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！</p>
</v-scroll>

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

監(jiān)聽scroll滾動事件

<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>這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！</p>
</v-scroll>

// 監(jiān)聽滾動事件
handleScroll(e) {
 this.scrollTop = e.target.scrollTop
 // 判斷滾動狀態(tài)
 if(e.target.scrollTop == 0) {
 this.scrollStatus = '到達(dá)頂部'
 } else if(e.target.scrollTop + e.target.offsetHeight >= e.target.scrollHeight) {
 this.scrollStatus = '到達(dá)底部'
 }else {
 this.scrollStatus = '滾動中....'
 }
},

OK，以上就是基于vue.js實現(xiàn)自定義滾動條組件。希望能對大家有些幫助！💪

到此這篇關(guān)于Vue.js桌面端自定義滾動條組件之美化滾動條VScroll的文章就介紹到這了,更多相關(guān)Vue.js美化滾動條VScroll內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: