1、main.js加入下面的代码
1 | import vuescroll from 'vuescroll' // 引入vuescroll |
2 | import 'vuescroll/dist/vuescroll.css' // 引入vuescroll样式 |
3 | Vue.use(vuescroll) // 使用vuescroll |
1 | < vue-scroll :ops = "ops" > |
2 | 滚动内容 |
3 | </ vue-scroll > |
01 | data(){ |
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 | } |