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

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

Vue3.0系列:vue3定制美化滚动条组件v3scroll

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

Vue3.0系列:vue3定制美化滚动条组件v3scroll

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

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

Vue3.0系列:vue3定制美化滚动条组件v3scroll
Vue3.0系列:vue3定制美化滚动条组件v3scroll

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

Vue3.0系列:vue3定制美化滚动条组件v3scroll

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

引入组件

在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>
Vue3.0系列:vue3定制美化滚动条组件v3scroll
<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>
Vue3.0系列:vue3定制美化滚动条组件v3scroll

编码实现

  • 参数配置
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逻辑处理
Vue3.0系列:vue3定制美化滚动条组件v3scroll
Vue3.0系列:vue3定制美化滚动条组件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系列:vue3定制美化滚动条组件v3scroll

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

内容出处:,

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

发表评论

登录后才能评论