滚动条插件vue-scroll

1）介绍

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

2）特点

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

3）用法

(1)安装

npm install vuescroll -S

(2)

①入口文件配置

1. import Vue from 'vue'
2. import vuescroll from 'vuescroll'
3. Vue.use(vuescroll)
4. const vm = new Vue({ el: "#app", data: { ops: { vuescroll: { }, scrollPanel: { } // ... } } })

②或在需要的页面引入

import vueScroll from "vuescroll";

在components中再注册一下

components:{vueScroll,}

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

1. <div id="app" >
2. <vue-scroll :ops="ops">
3. <div class="content" v-for= "item in 100" :key="item" >
4. <span>{{item}}</span>
5. </div>
6. </vue-scroll>
7. </div>

③配置

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

1. data(){
2. return{
3. // 滚动条的配置信息
4. ops:{
5. vueScroll:{},
6. scrollPanel:{},
7. rail:{
8. opacity:'0.1',
9. border:'1px solid #f2f2f2',
10. size:'6px'
11. },
12. bar:{
13. size:'6px',
14. background:'#999',
15. keepShow:true,
16. }
17. },}}

④配置项汇总

1. export default {
2. // vuescroll vuescroll: {
3. mode: 'native',
4. // 设置 vuescroll的大小类型， 可选的有percent, number.
5. // 设置为percent会把 vuescroll 的 height 和 width 设置成100%,
6. // 设置成number的话 vuescroll 会自动计算父元素的大小，并将height和width设置成对应的数值。
7. // 提示:如果父元素的尺寸为百分比大小时建议设置成number,如果父元素大小为一个固定的px的值,那么设置为百分比比较合适一些。
8. sizeStrategy: 'percent',
9. // 是否开启监听 dom resize
10. detectResize: true,
11. // 下拉刷新相关(slide mode) pullRefresh: {
12. enable: false,
13. // 下拉刷新的提示
14. tips: {
15. deactive: 'Pull to Refresh',
16. active: 'Release to Refresh',
17. start: 'Refreshing...',
18. beforeDeactive: 'Refresh Successfully!'
19. }
20. },
21. // 上推加载相关
22. pushLoad: {
23. enable: false,
24. tips: {
25. deactive: 'Push to Load',
26. active: 'Release to Load',
27. start: 'Loading...',
28. beforeDeactive: 'Load Successfully!'
29. },
30. auto: false,
31. autoLoadDistance: 0
32. },
33. paging: false,
34. zooming: true,
35. // 快照
36. snapping: {
37. enable: false,
38. width: 100,
39. height: 100
40. },
41. /* shipped scroll options */
42. scroller: {
43. /*
44. 允许滚动出边界
45. true 或者 false 或者一个数组指定哪个方向可以超出边界，可选项分别是：
46. ['top','bottom','left','right']
47. */
48. bouncing: true,
49. /** Enable locking to the main axis if user moves only slightly on one of them at start */
50. locking: true,
51. /** 最小缩放级别 */
52. minZoom: 0.5,
53. /** 最大缩放级别 */
54. maxZoom: 3,
55. /** 滚动速度的倍速 **/
56. speedMultiplier: 1,
57. /** 到达边界时应用于减速的改变量 **/
58. penetrationDeceleration: 0.03,
59. /** 到达边界时应用于加速的改变量 **/
60. penetrationAcceleration: 0.08,
61. /** Whether call e.preventDefault event when sliding the content or not */
62. preventDefault: true,
63. /** Whether call preventDefault when (mouse/touch)move*/
64. preventDefaultOnMove: true
65. }
66. },
67. scrollPanel: {
68. // 组件加载完后的初始滚动量
69. initialScrollY: false,
70. initialScrollX: false,
71. // 是否禁止x或y方向上的滚动
72. scrollingX: true,
73. scrollingY: true,
74. speed: 300,
75. // 滚动动画
76. easing: undefined,
77. // 是否有一个padding样式，样式的大小应该和rail/bar的大小是一样。可以用来阻止内容被滚动条遮住一部分
78. padding: false，
79. // 有时候原声滚动条可能在左侧,
80. // 请查看 https://github.com/YvesCoding/vuescroll/issues/64
81. verticalNativeBarPos: 'right'
82. },
83. //滚动条滚动的地方 rail: {
84. background: '#01a99a',
85. opacity: 0,
86. border: 'none',
87. /** Rail's size(Height/Width) , default -> 6px */
88. size: '6px',
89. /** Specify rail's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/
90. specifyBorderRadius: false,
91. /** Rail the distance from the two ends of the X axis and Y axis. **/
92. gutterOfEnds: null,
93. /** Rail the distance from the side of container. **/
94. gutterOfSide: '2px',
95. /** Whether to keep rail show or not, default -> false, event content height is not enough */
96. keepShow: false
97. },
98. bar: {
99. /** 当不做任何操作时滚动条自动消失的时间 */
100. showDelay: 500,
101. /** Specify bar's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/
102. specifyBorderRadius: false,
103. /** 是否只在滚动的时候现实滚动条 */
104. onlyShowBarOnScroll: true,
105. /** 是否保持显示 */
106. keepShow: false,
107. /** 滚动条颜色, default -> #00a650 */
108. background: 'rgb(3, 185, 118)',
109. /** 滚动条透明度, default -> 1 */
110. opacity: 1,
111. /** Styles when you hover scrollbar, it will merge into the current style */
112. hoverStyle: false
113. },
114. scrollButton: {
115. enable: false,
116. background: 'rgb(3, 185, 118)',
117. opacity: 1,
118. step: 180,
119. mousedownStep: 30
120. }
121. };

补充：vue-scroll中的@handle-scroll方法

 

综上

得出滚动条到达底部的计算公式为：clientHeight + scrollTop == scrollHeight,知道这个之后，我们写逻辑就容易多了，只需要在滚动条到达底部的时候，重新取获取数据就可以了