基于vue.js 2.x的虛擬滾動(dòng)條的示例代碼
前言
記得以前偶然有一次瀏覽過一個(gè)開源的cms項(xiàng)目，發(fā)現(xiàn)這個(gè)項(xiàng)目的左邊的菜單已經(jīng)超出了windows的寬度，我就好奇為什么沒出滾動(dòng)條呢？然后我仔細(xì)一看，發(fā)現(xiàn)它左側(cè)有一個(gè)小的div，然后我嘗試著拖動(dòng)它，發(fā)現(xiàn)竟能和原生的滾動(dòng)條一樣！可以通過查看它的源碼，發(fā)現(xiàn)了這款滾動(dòng)條的叫做slimScroll，然后我去它的github倉庫 看了下，研究了一下源碼，給我的感覺是我也能做出來一樣的滾動(dòng)條！通過vue實(shí)現(xiàn)！
設(shè)計(jì)
好， 現(xiàn)在開始我們的設(shè)計(jì)滾動(dòng)條的步驟：
設(shè)計(jì)滾動(dòng)條dom
首先要思考的是: 如果要使你需要滾動(dòng)的內(nèi)容滾動(dòng)的話，首先一點(diǎn)是它的父dom必須為固定長寬，即超出部分要隱藏掉，即加了個(gè)樣式: overflow: hidden , 所以，我們給所要滾動(dòng)的內(nèi)容加個(gè)包裝，使它的長寬和父dom相等，然后有一個(gè)樣式叫： overflow: hidden ,這個(gè)包裝的元素就叫 scrollPanel
其次:我們知道，我們要做到與原生滾動(dòng)條一樣強(qiáng)大！就必須設(shè)計(jì)水平滾動(dòng)條和垂直滾動(dòng)條，滾動(dòng)條和scrollPanel屬于兄弟節(jié)點(diǎn)之間的關(guān)系，因?yàn)闈L動(dòng)條的存在不能使原本的樣式排版錯(cuò)誤，并且支持top、left來控制其位置，所以滾動(dòng)條的position必須是absolute,好了，我們叫水平滾動(dòng)條為:hBar,垂直滾動(dòng)條為:vBar
最后：我們?cè)O(shè)計(jì)了scrollPanel、vBar、hBar, 我們需要一個(gè)父div來把他們包裝起來，然后加個(gè)樣式:position: relative
實(shí)踐
設(shè)計(jì)組件結(jié)構(gòu)
首先，我們的插件一共是4個(gè)組件，其中3個(gè)是子組件，1個(gè)是父組件，分別是: vueScroll (父組件)、 scrollPanel (包裹需要滾動(dòng)內(nèi)容的子組件)、 vBar (垂直滾動(dòng)條)、 hBar (水平滾動(dòng)條)
其次，讓我們?cè)O(shè)計(jì)一下各組件所分管的功能。這里的組件分為控制層組件和展示組件(熟悉react的同學(xué)應(yīng)該有所了解),展示層組件只完成展示的功能: vBar 、 hBar 、 scrollPanel ,控制層組件有點(diǎn)類似于cpu，可以控制子組件的各個(gè)狀態(tài)，比如寬、高、顏色、透明度、位置等等?？刂茖咏M件就是: vueScroll 。
具體實(shí)現(xiàn)
hBar/vBar
hBar/vBar 這兩個(gè)分別為水平滾動(dòng)條和垂直滾動(dòng)條，所實(shí)現(xiàn)的功能大體是一樣的，所以舊放在一起說了，這里以 vBar 為例。
props 接收父組件傳過來的屬性，具體為:
{
height: vm.state.height + 'px', //滾動(dòng)條的高度
width: vm.ops.width, // 滾動(dòng)條的寬度
position: 'absolute',
background: vm.ops.background, // 滾動(dòng)條背景色
top: vm.state.top + 'px', // 滾動(dòng)條的高度
transition: 'opacity .5s', // 消失/顯示 所用的時(shí)間
cursor: 'pointer', //
opacity: vm.state.opacity, // 透明度
userSelect: 'none'
}
2 事件，主要是當(dāng)鼠標(biāo)移動(dòng)的時(shí)候，顯示滾動(dòng)條。
...
render(_c){
return _c(
// ...
{
mouseenter: function(e) {
vm.$emit('showVBar'); // 觸發(fā)父組件事件，顯示滾動(dòng)條
}
}
// ...
)
}
其中 state 表示狀態(tài)，是在運(yùn)行時(shí)可發(fā)生改變的，而 ops 則是配置參數(shù)，是用戶傳過來的。
scrollPanel
包裹滾動(dòng)內(nèi)容的組件，樣式需設(shè)置為: overflow: hidden 。
1、樣式
var style = vm.scrollContentStyle;
style.overflow = 'hidden';
// ...
{
style: style
}
// ...
2、事件
// ...
render(_c) {
// ...
on: {
mouseenter: function() {
vm.$emit('showBar');
},
mouseleave: function() {
vm.$emit('hideBar');
}
}
// ...
}
// ...
vuescroll
控制組件?？刂谱咏M件顯示的狀態(tài)，添加各種監(jiān)聽事件等。
1、取得子組件的dom元素，用來取得dom的實(shí)時(shí)信息。
// ...
initEl() {
this.scrollPanel.el = this.$refs['vueScrollPanel'] && this.$refs['vueScrollPanel'].$el;
this.vScrollBar.el = this.$refs['vScrollBar'] && this.$refs['vScrollBar'].$el;
this.hScrollBar.el = this.$refs['hScrollBar'] && this.$refs['hScrollBar'].$el;
}
// ...
2、顯示滾動(dòng)條
顯示滾動(dòng)條，包括顯示水平滾動(dòng)條和顯示垂直滾動(dòng)條，這里以顯示垂直滾動(dòng)條為例：
// ...
var temp;
var deltaY = {
deltaY: this.vScrollBar.ops.deltaY // 獲取用戶配置的deltaY
};
if(!this.isMouseLeavePanel || this.vScrollBar.ops.keepShow){
if ((this.vScrollBar.state.height = temp = this.getVBarHeight(deltaY))) { // 判斷條件
// 重新設(shè)置滾動(dòng)條的狀態(tài)
this.vScrollBar.state.top = this.resizeVBarTop(temp);
this.vScrollBar.state.height = temp.height;
this.vScrollBar.state.opacity = this.vScrollBar.ops.opacity;
}
}
// ...
3、獲取滾動(dòng)條的高度
因?yàn)閐om元素的高度不是固定的，所以你要實(shí)時(shí)地獲取dom真實(shí)的高度，滾動(dòng)條的高度計(jì)算公式如下:
var height = Math.max(
scrollPanelHeight /
(scrollPanelScrollHeight / scrollPanelHeight),
this.vScrollBar.minBarHeight
);
即： 滾動(dòng)條的高度:scrollPanel的高度 == scrollPanel的高度:dom元素高度
4、resizeVBarTop ,為了防止誤差，并且可以求出滾動(dòng)條距離父元素的高度。
resizeVBarTop({height, scrollPanelHeight, scrollPanelScrollHeight, deltaY}) {
// cacl the last height first
var lastHeight = scrollPanelScrollHeight - scrollPanelHeight - this.scrollPanel.el.scrollTop;
if(lastHeight < this.accuracy) {
lastHeight = 0;
}
var time = Math.abs(Math.ceil(lastHeight / deltaY));
var top = scrollPanelHeight - (height + (time * this.vScrollBar.innerDeltaY));
return top;
}
5、監(jiān)聽滾輪滾動(dòng)的事件。
// ...
on: {
wheel: vm.wheel
}
// ...
wheel(e) {
var vm = this;
vm.showVBar();
vm.scrollVBar(e.deltaY > 0 ? 1 : -1, 1);
e.stopPropagation();
}
// ...
6、監(jiān)聽滾動(dòng)條拖拽事件
listenVBarDrag: function() {
var vm = this;
var y;
var _y;
function move(e) {
_y = e.pageY;
var _delta = _y - y;
vm.scrollVBar(_delta > 0 ? 1 : -1, Math.abs(_delta / vm.vScrollBar.innerDeltaY));
y = _y;
}
function t(e) {
var deltaY = {
deltaY: vm.vScrollBar.ops.deltaY
};
if(!vm.getVBarHeight(deltaY)) {
return;
}
vm.mousedown = true;
y = e.pageY; // 記錄初始的Y的位置
vm.showVBar();
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', function(e) {
vm.mousedown = false;
vm.hideVBar();
document.removeEventListener('mousemove', move);
});
}
this.listeners.push({
dom: vm.vScrollBar.el,
event: t,
type: "mousedown"
});
vm.vScrollBar.el.addEventListener('mousedown', t); // 把事件放到數(shù)組里面，等銷毀之前移除掉注冊(cè)的時(shí)間。
}
7、適配移動(dòng)端，監(jiān)聽 touch 事件。原理跟拖拽事件差不多，無非就是多了個(gè)判斷，來判斷當(dāng)前方向是x還是y。
listenPanelTouch: function() {
var vm = this;
var pannel = this.scrollPanel.el;
var x, y;
var _x, _y;
function move(e) {
if(e.touches.length) {
var touch = e.touches[0];
_x = touch.pageX;
_y = touch.pageY;
var _delta = void 0;
var _deltaX = _x - x;
var _deltaY = _y - y;
if(Math.abs(_deltaX) > Math.abs(_deltaY)) {
_delta = _deltaX;
vm.scrollHBar(_delta > 0 ? -1 : 1, Math.abs(_delta / vm.hScrollBar.innerDeltaX));
} else if(Math.abs(_deltaX) < Math.abs(_deltaY)){
_delta = _deltaY;
vm.scrollVBar(_delta > 0 ? -1 : 1, Math.abs(_delta / vm.vScrollBar.innerDeltaY));
}
x = _x;
y = _y;
}
}
function t(e) {
var deltaY = {
deltaY: vm.vScrollBar.ops.deltaY
};
var deltaX = {
deltaX: vm.hScrollBar.ops.deltaX
};
if(!vm.getHBarWidth(deltaX) && !vm.getVBarHeight(deltaY)) {
return;
}
if(e.touches.length) {
e.stopPropagation();
var touch = e.touches[0];
vm.mousedown = true;
x = touch.pageX;
y = touch.pageY;
vm.showBar();
pannel.addEventListener('touchmove', move);
pannel.addEventListener('touchend', function(e) {
vm.mousedown = false;
vm.hideBar();
pannel.removeEventListener('touchmove', move);
});
}
}
pannel.addEventListener('touchstart', t);
this.listeners.push({
dom: pannel,
event: t,
type: "touchstart"
});
}
8、滾動(dòng)內(nèi)容
滾動(dòng)內(nèi)容的原理無非就是改變 scrollPanel 的 scrollTop/scrollLeft 來達(dá)到控制內(nèi)容上下左右移動(dòng)的目的。
scrollVBar: function(pos, time) {
// >0 scroll to down <0 scroll to up
var top = this.vScrollBar.state.top;
var scrollPanelHeight = getComputed(this.scrollPanel.el, 'height').replace('px', "");
var scrollPanelScrollHeight = this.scrollPanel.el.scrollHeight;
var scrollPanelScrollTop = this.scrollPanel.el.scrollTop;
var height = this.vScrollBar.state.height;
var innerdeltaY = this.vScrollBar.innerDeltaY;
var deltaY = this.vScrollBar.ops.deltaY;
if (!((pos < 0 && top <= 0) || (scrollPanelHeight <= top + height && pos > 0) || (Math.abs(scrollPanelScrollHeight - scrollPanelHeight) < this.accuracy))) {
var Top = top + pos * innerdeltaY * time;
var ScrollTop = scrollPanelScrollTop + pos * deltaY * time;
if (pos < 0) {
// scroll ip
this.vScrollBar.state.top = Math.max(0, Top);
this.scrollPanel.el.scrollTop = Math.max(0, ScrollTop);
} else if (pos > 0) {
// scroll down
this.vScrollBar.state.top = Math.min(scrollPanelHeight - height, Top);
this.scrollPanel.el.scrollTop = Math.min(scrollPanelScrollHeight - scrollPanelHeight, ScrollTop);
}
}
// 這些是傳遞給父組件的監(jiān)聽滾動(dòng)的函數(shù)的。
var content = {};
var bar = {};
var process = "";
content.residual = (scrollPanelScrollHeight - scrollPanelScrollTop - scrollPanelHeight);
content.scrolled = scrollPanelScrollTop;
bar.scrolled = this.vScrollBar.state.top;
bar.residual = (scrollPanelHeight - this.vScrollBar.state.top - this.vScrollBar.state.height);
bar.height = this.vScrollBar.state.height;
process = bar.scrolled/(scrollPanelHeight - bar.height);
bar.name = "vBar";
content.name = "content";
this.$emit('vscroll', bar, content, process);
},
9、銷毀注冊(cè)的事件。
剛才我們已經(jīng)把注冊(cè)事件放到listeners數(shù)組里面了，我們可以在beforedestroy鉤子里將他們進(jìn)行銷毀。
// remove the registryed event.
this.listeners.forEach(function(item) {
item.dom.removeEventListener(item.event, item.type);
});
運(yùn)行截圖
PC端運(yùn)行截圖如下圖所示：
注冊(cè)監(jiān)聽事件以后如下圖所示：
在手機(jī)上運(yùn)行截圖：
可以看出，跟原生滾動(dòng)條表現(xiàn)效果一致。
結(jié)語&感悟
以上就基本把我設(shè)計(jì)的滾動(dòng)條設(shè)計(jì)完了，首先很感激掘金給了我這么一個(gè)分享平臺(tái)，然后感謝slimScroll的作者給了我這么一個(gè)思路。做完這個(gè)插件， 我對(duì)dom元素的scrollWidth、scrollHeigh、scrollTop、scrollLeft的了解更多了，最后，附上github項(xiàng)目地址
以上部分就是這個(gè)組件的核心源碼了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue如何禁止打開調(diào)試模式方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue 3 自定義權(quán)限指令 v-action的作用
在實(shí)際的前端開發(fā)中,尤其是涉及到權(quán)限管理的系統(tǒng),我們經(jīng)常需要根據(jù)用戶的權(quán)限動(dòng)態(tài)控制某些按鈕的顯示和隱藏,這篇文章主要介紹了Vue 3 自定義權(quán)限指令 v-action的相關(guān)知識(shí),需要的朋友可以參考下2025-04-04
這篇文章主要為大家詳細(xì)介紹了Vue.js創(chuàng)建Calendar日歷效果的過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了vue-cli3 從搭建到優(yōu)化的詳細(xì)步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了vue項(xiàng)目中如何引入cesium問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue如何自定義按鈕單選和多選問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue組件開發(fā)之slider組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
淺談el-table中使用虛擬列表對(duì)對(duì)表格進(jìn)行優(yōu)化
我們會(huì)經(jīng)常使用表格，如果數(shù)據(jù)量大就直接可以分頁，如果多條可能會(huì)影響表格的卡頓，那么應(yīng)該如何進(jìn)行優(yōu)化，感興趣的可以了解一下2021-08-08
vue隨機(jī)驗(yàn)證碼組件的封裝實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了如何封裝一個(gè)隨機(jī)驗(yàn)證碼的VUE組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要為大家詳細(xì)介紹了Vue自定義模態(tài)對(duì)話框彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07