基于svelte3自定义虚拟滚动条组件svelte3-scrollbar

前段时间有给大家分享两个svelte3.x系列组件。今天继续分享一个最新写的svelte3-scrollbar虚拟美化系统滚动条组件。

svelte-layer:一款svelte3.x轻量级PC端弹窗组件
svelte-popup:一款svelte3.x移动端弹层组件

svelte-scrollbar 一款轻量级网页自定义美化系统滚动条组件。支持原生滚动条、自动隐藏、垂直+水平滚动、自定义滚动条大小/颜色/间隙等功能。

基于svelte3自定义虚拟滚动条组件svelte3-scrollbar_第1张图片

在lib目录下新建一个Scrollbar组件。

基于svelte3自定义虚拟滚动条组件svelte3-scrollbar_第2张图片

引入组件

在需要用到滚动条功能的页面引入插件。

import Scrollbar from '$lib/Scrollbar'

快速调用

通过如下方式调用,即可快速生成一个虚拟化滚动条。



    
自定义内容信息。
自定义内容信息。
自定义内容信息。
自定义内容信息。
自定义内容信息。

基于svelte3自定义虚拟滚动条组件svelte3-scrollbar_第3张图片

参数配置

svelte-scrollbar支持如下参数配置。

模板及逻辑部分

handleClickTrack(e, 0)} >
handleDragThumb(e, 0)}>
handleClickTrack(e, 1)}>
handleDragThumb(e, 1)}>

基于svelte3自定义虚拟滚动条组件svelte3-scrollbar_第4张图片

基于svelte3自定义虚拟滚动条组件svelte3-scrollbar_第5张图片

另外还支持动态监听scroll事件。


    
自定义内容信息。

基于svelte3自定义虚拟滚动条组件svelte3-scrollbar_第6张图片

OK,以上就是svelte.js自定义系统美化滚动条组件的分享。后续还会分享一个svelte桌面端实例项目。

最后附上一个svelte3聊天实战项目

svelte-chat基于svelte3.x仿微信APP聊天项目

目前svelte.js稳定性还可以,生态也逐步完善,期待更多的开发小伙伴一起参与进来。

你可能感兴趣的