最近在开发Vue项目时，需要实现一个页面的局部滚动条功能。以前实现此类功能都是使用的iframe原生的滚动条功能，保证内容只在div块内滚动，别的地方不影响。
据尝试，发现Iview等组件库都没有符合这种情况的组件，于是查找了其他组件，最终选用了vue-scroll插件。
1）介绍
vuescroll 是一个基于 vue.js 2.X虚拟滚动条， 它支持定制滚动条的样式，检测内容尺寸变化、能够使内容分页、支持上拉-刷新，下推加载等诸多特性。
2）特点
(1)拥有原生滚动条的滚动行为
(2)可以定制滚动条的样式(包括颜色、尺寸、位置、透明度、是否保持显示等)
(3)在模式之间自由切换
(4)能够通过设置滚动动画来平滑地滚动
(5)拉取刷新和推动加载
(6)支持分页模式(每次滑动整个页面)
(7)支持快照模式(每次滑动滚动一个用户定义的距离)
(8)可以检测内容尺寸发生变化
3）用法
(1)安装
npm install vuescroll -S
(2)
①入口文件配置
import Vue from 'vue'
import vuescroll from 'vuescroll'
Vue.use(vuescroll)
const vm = new Vue({ el: "#app", data: { ops: { vuescroll: { }, scrollPanel: { } // ... } } })
②或在需要的页面引入
import vueScroll from "vuescroll";
在components中再注册一下
components:{vueScroll,}
这两种引入方式都可以，引入后用vuescroll包裹需要滚动的部分
<div id="app" >
<vue-scroll :ops="ops">
<div class="content" v-for= "item in 100" :key="item" >
<span>{{item}}</span>
</div>
</vue-scroll>
</div>
③配置
在data中写明需要修改的配置项
data(){
return{
// 滚动条的配置信息
ops:{
vueScroll:{},
scrollPanel:{},
rail:{
opacity:'0.1',
border:'1px solid #f2f2f2',
size:'6px'
},
bar:{
size:'6px',
background:'#999',
keepShow:true,
}
},}}
④配置项汇总
export default {
// vuescroll vuescroll: {
mode: 'native',
// 设置 vuescroll的大小类型， 可选的有percent, number.
// 设置为percent会把 vuescroll 的 height 和 width 设置成100%,
// 设置成number的话 vuescroll 会自动计算父元素的大小，并将height和width设置成对应的数值。
// 提示:如果父元素的尺寸为百分比大小时建议设置成number,如果父元素大小为一个固定的px的值,那么设置为百分比比较合适一些。
sizeStrategy: 'percent',
// 是否开启监听 dom resize
detectResize: true,
// 下拉刷新相关(slide mode) pullRefresh: {
enable: false,
// 下拉刷新的提示
tips: {
deactive: 'Pull to Refresh',
active: 'Release to Refresh',
start: 'Refreshing...',
beforeDeactive: 'Refresh Successfully!'
}
},
// 上推加载相关
pushLoad: {
enable: false,
tips: {
deactive: 'Push to Load',
active: 'Release to Load',
start: 'Loading...',
beforeDeactive: 'Load Successfully!'
},
auto: false,
autoLoadDistance: 0
},
paging: false,
zooming: true,
// 快照
snapping: {
enable: false,
width: 100,
height: 100
},
/* shipped scroll options */
scroller: {
/*
允许滚动出边界
true 或者 false 或者一个数组指定哪个方向可以超出边界，可选项分别是：
['top','bottom','left','right']
*/
bouncing: true,
/** Enable locking to the main axis if user moves only slightly on one of them at start */
locking: true,
/** 最小缩放级别 */
minZoom: 0.5,
/** 最大缩放级别 */
maxZoom: 3,
/** 滚动速度的倍速 **/
speedMultiplier: 1,
/** 到达边界时应用于减速的改变量 **/
penetrationDeceleration: 0.03,
/** 到达边界时应用于加速的改变量 **/
penetrationAcceleration: 0.08,
/** Whether call e.preventDefault event when sliding the content or not */
preventDefault: true,
/** Whether call preventDefault when (mouse/touch)move*/
preventDefaultOnMove: true
}
},
scrollPanel: {
// 组件加载完后的初始滚动量
initialScrollY: false,
initialScrollX: false,
// 是否禁止x或y方向上的滚动
scrollingX: true,
scrollingY: true,
speed: 300,
// 滚动动画
easing: undefined,
// 是否有一个padding样式，样式的大小应该和rail/bar的大小是一样。可以用来阻止内容被滚动条遮住一部分
padding: false，
// 有时候原声滚动条可能在左侧,
// 请查看 https://github.com/YvesCoding/vuescroll/issues/64
verticalNativeBarPos: 'right'
},
//滚动条滚动的地方 rail: {
background: '#01a99a',
opacity: 0,
border: 'none',
/** Rail's size(Height/Width) , default -> 6px */
size: '6px',
/** Specify rail's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/
specifyBorderRadius: false,
/** Rail the distance from the two ends of the X axis and Y axis. **/
gutterOfEnds: null,
/** Rail the distance from the side of container. **/
gutterOfSide: '2px',
/** Whether to keep rail show or not, default -> false, event content height is not enough */
keepShow: false
},
bar: {
/** 当不做任何操作时滚动条自动消失的时间 */
showDelay: 500,
/** Specify bar's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/
specifyBorderRadius: false,
/** 是否只在滚动的时候现实滚动条 */
onlyShowBarOnScroll: true,
/** 是否保持显示 */
keepShow: false,
/** 滚动条颜色, default -> #00a650 */
background: 'rgb(3, 185, 118)',
/** 滚动条透明度, default -> 1 */
opacity: 1,
/** Styles when you hover scrollbar, it will merge into the current style */
hoverStyle: false
},
scrollButton: {
enable: false,
background: 'rgb(3, 185, 118)',
opacity: 1,
step: 180,
mousedownStep: 30
}
};
