基于vue3的滚动条组件

Posted 2023-04-05

参考技术A 最近开始尝试vue3开发项目，用了ant-design-vue框架，但是发现没有滚动条组件，因此自己尝试着写了一个，有需要的可以使用，有什么问题可以给我提issue。

地址： https://github.com/chenjiaj/c-scrollbar
查看效果： https://chenjiaj.github.io/c-scrollbar/

全局注册 main.ts

局部引入

App.vue

注：同时设置maxHeight、height或maxWidth、width，以较小者生效,尽量避免同事设置

更多例子：参考src文件夹中example中的.vue文件

vue的滚动条插件vue-scroll

参考技术A 最近在开发Vue项目时，需要实现一个页面的局部滚动条功能。以前实现此类功能都是使用的iframe原生的滚动条功能，保证内容只在div块内滚动，别的地方不影响。
据尝试，发现Iview等组件库都没有符合这种情况的组件，于是查找了其他组件，最终选用了vue-scroll插件。

vuescroll 是一个基于 vue.js 2.X 虚拟滚动条， 它支持定制滚动条的样式，检测内容尺寸变化、能够使内容分页、支持上拉-刷新，下推加载等诸多特性。

(1)拥有原生滚动条的滚动行为
(2)可以定制滚动条的样式(包括颜色、尺寸、位置、透明度、是否保持显示等)
(3)在模式之间自由切换
(4)能够通过设置滚动动画来平滑地滚动
(5)拉取刷新和推动加载
(6)支持分页模式(每次滑动整个页面)
(7)支持快照模式(每次滑动滚动一个用户定义的距离)
(8)可以检测内容尺寸发生变化

在components中再注册一下

这两种引入方式都可以，引入后用vuescroll包裹需要滚动的部分

在data中写明需要修改的配置项