vue iscroll5滚动条组件

vue element ui中有个隐藏的滚动条组件，没有仔细去研究，因为之前非vue项目中经常使用iscroll5来模拟滚动条，所以直接拿过来搞成了一个简单的小组件来用。

具体组件编写如下，也就是简单的做了一下初始化，使用iscroll5中的一些功能方法按其api来用即可

<template>
<div class="wrapper">
<div class="scroller">
<slot></slot>
</div>
</div>
</template>

<script>
import IScroll from './iscroll-probe'; //这里引入的是iscroll-probe 版本js
export default {
name: 'fly-iscroll',
props: {
opts: {
type: Object,
default() {
return {
bounce: false,
preventDefault: false,
mouseWheel: true, //鼠标滚轮
disableMouse: true, //禁用鼠标
disablePointer: true, //禁用鼠标
interactiveScrollbars: true, //滚动条能拖动
fadeScrollbars: true, //淡入淡出
scrollbars: true //滚动条
}
}
}
},
data() {
return {
scroll: null
}
},
mounted() {
this.scroll = new IScroll(this.$el, this.opts);
}
}
</script>

<style>
.wrapper{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.scroller{
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.iScrollIndicator{
background: rgba(0, 0, 0, 0.2) !important;
}
.wrapper:hover .iScrollVerticalScrollbar{
opacity: 1 !important; /*  是为了鼠标放上去即显示出来滚动条，因为设置了fadeScrollbars淡入淡出  */
}
</style>

 

 

 具体用法，查看iscroll5 api文档，下面只简单使用了一下其refresh()刷新方法

<template>
<fly-iscroll ref="right">
<router-view></router-view>
</fly-iscroll>
</template>

<script>
export default {
data() {
return {

}
},
updated() {
this.$nextTick(() => {
this.$refs.right.scroll.refresh(); //this.$refs.right.scroll即得到了其实例化后的滚动条，就可以直接调用iscroll5中的一些方法了。
});
}
}
</script>