Vue.js桌面端自定義滾動條組件之美化滾動條VScroll
更新時間：2020年12月01日 12:02:08 作者：xiaoyan2017
這篇文章主要給大家介紹了關(guān)于Vue.js桌面端自定義滾動條組件之美化滾動條VScroll的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
前言
前段時間有給大家分享一個vue桌面端彈框組件，今天再分享最近開發(fā)的一個vue pc端自定義滾動條組件。
vscroll 一款基于vue2.x開發(fā)的網(wǎng)頁端輕量級超小巧自定義美化滾動條組件。支持是否原生滾動條、鼠標移出是否自動隱藏、自定義滾動條尺寸及顏色等功能。
組件在設(shè)計開發(fā)之初借鑒了 el-scrollbar 及 vuebar 等組件設(shè)計思想。
通過簡單的標簽寫法<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, // 鼠標光標是否按住滾動條
isHover: false, // 鼠標光標是否懸停在滾動區(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: {
// 鼠標移入
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)
},
// 更新滾動區(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 = '到達頂部'
} else if(e.target.scrollTop + e.target.offsetHeight >= e.target.scrollHeight) {
this.scrollStatus = '到達底部'
}else {
this.scrollStatus = '滾動中....'
}
},
OK，以上就是基于vue.js實現(xiàn)自定義滾動條組件。希望能對大家有些幫助！💪
到此這篇關(guān)于Vue.js桌面端自定義滾動條組件之美化滾動條VScroll的文章就介紹到這了,更多相關(guān)Vue.js美化滾動條VScroll內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在?vue?里我們可以通過全局事件總線來實現(xiàn)任意組件之間通信，它的原理是給?Vue?的原型對象上面添加一個屬性。這樣的話我所有組件的都可以訪問到這個屬性，然后可以通過這個屬性來訪問其他組件給這個屬性上面綁定的一些方法，從而去傳遞數(shù)據(jù)2022-08-08
這篇文章主要介紹了vue導(dǎo)出excel文件流中文亂碼問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue組件重新渲染(組件重載)的3種實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue生命周期activated之返回上一頁不重新請求數(shù)據(jù)操作
這篇文章主要介紹了Vue生命周期activated之返回上一頁不重新請求數(shù)據(jù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
最近工作中遇到了npm?run?dev報錯這個問題,通過查找相關(guān)資料最終解決了,所以下面這篇文章主要給大家介紹了關(guān)于npm?run?dev失敗的詳細解決辦法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要為大家介紹了Vue插槽解決父子組件通信，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了Vue3配置axios跨域?qū)崿F(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
vue3+element-plus暗黑模式切換動畫圓弧過渡效果
文章介紹了如何在Vue 3和Element Plus中實現(xiàn)暗黑模式的切換,并通過動畫和圓弧過渡效果提升用戶體驗,本文給大家介紹的非常詳細,感興趣的朋友一起看看吧2025-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue項目中常常會用到keepalive來作緩存,在應(yīng)付基本要求上能夠說很是方便,可是遇到同一個頁面,根據(jù)條件不一樣,分別緩存或者不緩存,就有些麻煩了,這篇文章主要給大家介紹了關(guān)于keep-alive如何清除緩存的相關(guān)資料,需要的朋友可以參考下2021-08-08