簡介
VScroll 基於vuejs2.x構建的PC桌面端自定義模擬滾動條元件。支援是否原生滾動條、滑鼠滑出是否隱藏滾動條、自定義滾動條尺寸、層級及顏色等功能。擁有絲滑般滾動效果！
只需 <v-scroll>...</v-scroll> 即可快速模擬出一個漂亮的虛擬滾動條。
引入元件
在main.js中引入滾動條元件。
import VScroll from './components/vscroll'
Vue.use(VScroll)引數配置
props: {
// 是否顯示原生滾動條
native: Boolean,
// 是否自動隱藏滾動條
autohide: Boolean,
// 滾動條尺寸
size: { type: [Number, String], default: '' },
// 滾動條顏色
color: String,
// 滾動條層級
zIndex: null
},
使用元件
<!-- 原生滾動條 -->
<v-scroll native>
<img src="https://cn.vuejs.org/images/logo.png" />
<p>這裡是自定義內容。這裡是自定義內容。這裡是自定義內容。</p>
</v-scroll>
<!-- 引數配置 -->
<v-scroll autohide size="15" color="#00a1e0" zIndex="2021">
<img src="https://cn.vuejs.org/images/logo.png" />
<p>這裡是自定義內容。這裡是自定義內容。這裡是自定義內容。</p>
</v-scroll>
實現過程
<!--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>
/**
* @Desc Vue美化系統滾動條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 = ''
}
// 水平滾動條
...
},
handleResize() {
// 更新滾動條狀態
},
// ...
}
}
</script>通過vue的指令函式directives來實時監聽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__);
}
}
},
<v-scroll @scroll="handleEvtScroll">
<img src="img/logo.png" style="height:600px;" />
<p>這裡是內容資訊！這裡是內容資訊！這裡是內容資訊！</p>
</v-scroll>
// 監聽滾動事件
handleEvtScroll(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實現XY軸自定義滾動條元件，如果大家有興趣可以自己去嘗試下哈。?
vue.js桌面PC端對話方塊元件VLayer
基於 vue.js 自定義移動端對話方塊元件 VPopup
本作品採用《CC 協議》，轉載必須註明作者和本文連結