vuejs滚动条_Vue.js仿饿了么滚动条|vue自定义模拟滚动条组件VScroll

介绍

vscroll一款基于vue2.x开发的PC桌面端自定义虚拟滚动条组件。支持是否原生滚动、滑出是否自动隐藏、滚动条大小、层级及颜色等功能。

如上图：同时支持垂直/水平滚动条。

通过非常简单的配置 即可快速生成一个虚拟美化滚动条。

配置参数

props: {

// 是否显示原生滚动条

native: Boolean,

// 是否自动隐藏滚动条

autohide: Boolean,

// 滚动条尺寸

size: { type: [Number, String], default: '' },

// 滚动条颜色

color: String,

// 滚动条层级

zIndex: null

},

引入组件

import VScroll from './components/vscroll';

Vue.use(VScroll);

使用组件

这里是自定义内容。这里是自定义内容。这里是自定义内容。

这里是自定义内容。这里是自定义内容。这里是自定义内容。

编码实现

/**

* @Desc Vue美化系统滚动条VScroll

* @Time andy by 2020/11/30

* @About Q：282310962 wx：xy190310

*/

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() {

// 更新滚动条状态

},

// ...

}

}

Okay，基于vue开发自定义滚动条组件就分享到这里。希望对大家有些帮助！