vue3定制美化滚动条组件：v3scroll

Vedu • 2021-01-08 12:59 • 资源分享 • 阅读 3437

今天给大家分享一个最新开发的Vue3自定义模拟滚动条组件v3scroll。

V3Scroll 基于vue3.0开发的轻量级PC端虚拟滚动条组件。支持是否自动隐藏、自定义大小、颜色及层叠等功能。

开发灵感来自于之前的vue2版自定义滚动条组件。借鉴了ElementPlus滚动条设计。

vue2.x自定义桌面端滚动条组件

v3scroll同样支持垂直/水平滚动条。并且在功能效果上和之前vue2版保持一致。

通过简单的裹住内容块，即可快速生成一个精致的仿原生滚动条。

引入组件

在main.js中整体引入组件。

import { createApp } from \'vue\'
import App from \'./App.vue\'
import \'./index.css\'

// 引入滚动条组件v3scroll
import V3Scroll from \'./components/v3scroll\'

createApp(App).use(V3Scroll).mount(\'#app\')

快速使用

<v3-scroll :native="true">
	<img src="https://cn.vuejs.org/images/logo.png" style="max-width:100%;" />
	<p>这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！p>
v3-scroll>

<v3-scroll size="12px">
	<img src="https://cn.vuejs.org/images/logo.png" style="height:180px" />
    <img src="https://cn.vuejs.org/images/logo.png" style="height:180px" />
	<p>这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！p>
v3-scroll>

编码实现

参数配置

props: {
	// 是否显示原生滚动条
	native: Boolean,
	// 是否自动隐藏滚动条
	autohide: Boolean,
	// 滚动条尺寸
	size: { type: [Number, String], default: \'\' },
	// 滚动条颜色
	color: String,
	// 滚动条层级
	zIndex: null
},

v3scroll组件模板

<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)">
            <div class="vscroll__thumb" ref="ref__barY" @mousedown="handleDragThumb($event, 0)">div>
        div>
        <div :class="[\'vscroll__bar horizontal\', {ishide: !isShow}]" @mousedown="handleClickTrack($event, 1)">
            <div class="vscroll__thumb" ref="ref__barX" @mousedown="handleDragThumb($event, 1)">div>
        div>
    div>
template>

v3scroll逻辑处理

"handleScroll">
	<p><img src="https://cn.vuejs.org/images/logo.png" style="height:250px;" />p>
	<p>这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！p>
v3-scroll>

setup() {
	// 监听滚动事件
	const handleScroll = (e) => {
		data.scrollTop = e.target.scrollTop
		// 判断滚动状态
		if(e.target.scrollTop == 0) {
			data.scrollStatus = \'到达顶部\'
		} else if(e.target.scrollTop   e.target.offsetHeight >= e.target.scrollHeight) {
			data.scrollStatus = \'到达底部\'
		}else {
			data.scrollStatus = \'滚动中....\'
		}
	}
	
	// ...
}

好了，基于vue3.0实现pc端模拟滚动条就分享到这里。感谢大家的阅读！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/19365.html

vue3定制美化滚动条组件：v3scroll

引入组件

快速使用

编码实现

相关推荐

发表评论