首页 > 建站教程 > 前端框架 >  vue滚动条美化插件vueScroll正文

vue滚动条美化插件vueScroll

    vue滚动条美化插件vueScroll不仅仅可以美化滚动条,还支持上拉刷新下拉加载、支持平滑滚动、支持截断配置,每次滚动固定的距离、支持自动检测内容是否发生变化、支持分页等等,非常不错。这里仅展示最基本的滚动条美化功能的实现:

1、main.js加入下面的代码
1import vuescroll from 'vuescroll' //  引入vuescroll
2import 'vuescroll/dist/vuescroll.css'//  引入vuescroll样式
3Vue.use(vuescroll) // 使用vuescroll
2、将需要显示滚动条的容器改成下面的代码
1<vue-scroll :ops="ops">
2    滚动内容
3</vue-scroll>
3、在data中配置滚动条参数
01data(){
02    return {
03        ops:{
04            vuescroll: {
05                mode: 'native',//选择一个模式, native 或者 slide(pc&app)
06                sizeStrategy: 'percent',//如果父容器不是固定高度,请设置为 number , 否则保持默认的percent即可
07                detectResize: true//是否检测内容尺寸发生变化
08            },
09            scrollPanel: {
10                initialScrollY: false,//只要组件mounted之后自动滚动的距离。 例如 100 or 10%
11                initialScrollX: false,
12                scrollingX: true,//是否启用 x 或者 y 方向上的滚动
13                scrollingY: true,
14                speed: 300,//多长时间内完成一次滚动。 数值越小滚动的速度越快
15                easing: undefined,//滚动动画 参数通animation
16                verticalNativeBarPos: 'right'//原生滚动条的位置
17            },
18            rail: {//轨道
19                background: '#c3c3c3',//轨道的背景色
20                opacity: 0,
21                size: '6px',
22                specifyBorderRadius: false,//是否指定轨道的 borderRadius, 如果不那么将会自动设置
23                gutterOfEnds: null,
24                gutterOfSide: '0px',//轨道距 x 和 y 轴两端的距离
25                keepShow: false //是否即使 bar 不存在的情况下也保持显示
26            },
27            bar: {
28                showDelay: 500,//在鼠标离开容器后多长时间隐藏滚动条
29                onlyShowBarOnScroll: false,//当页面滚动时显示
30                keepShow: false,//是否一直显示
31                background: '#c3c3c3',
32                opacity: 1,
33                hoverStyle: false,
34                specifyBorderRadius: false,
35                minSize: false,
36                size: '6px',
37                disable: false,//是否禁用滚动条
38            },// 在这里设置全局默认配置
39            name: 'vuescroll' // 在这里自定义组件名字,默认是vueScroll
40        },
41    }
42}