vue iscroll5滾動條組件

vue element ui中有個隱藏的滾動條組件，沒有仔細去研究，由於以前非vue項目中常用iscroll5來模擬滾動條，因此直接拿過來搞成了一個簡單的小組件來用。

具體組件編寫以下，也就是簡單的作了一下初始化，使用iscroll5中的一些功能方法按其api來用便可

 1 <template>
 2 <div class="wrapper">
 3 <div class="scroller">
 4 <slot></slot>
 5 </div>
 6 </div>
 7 </template>
 8 
 9 <script>
10 import IScroll from './iscroll-probe'; //這裏引入的是iscroll-probe 版本js
11 export default {
12 name: 'fly-iscroll',
13 props: {
14 opts: {
15 type: Object,
16 default() {
17 return {
18 bounce: false,
19 preventDefault: false,
20 mouseWheel: true, //鼠標滾輪
21 disableMouse: true, //禁用鼠標
22 disablePointer: true, //禁用鼠標
23 interactiveScrollbars: true, //滾動條能拖動
24 fadeScrollbars: true, //淡入淡出
25 scrollbars: true //滾動條
26 }
27 }
28 }
29 },
30 data() {
31 return {
32 scroll: null
33 }
34 },
35 mounted() {
36 this.scroll = new IScroll(this.$el, this.opts);
37 }
38 }
39 </script>
40 
41 <style>
42 .wrapper{
43 position: relative;
44 width: 100%;
45 height: 100%;
46 overflow: hidden;
47 }
48 .scroller{
49 position: absolute;
50 left: 0;
51 top: 0;
52 width: 100%;
53 }
54 .iScrollIndicator{
55 background: rgba(0, 0, 0, 0.2) !important;
56 }
57 .wrapper:hover .iScrollVerticalScrollbar{
58 opacity: 1 !important; /*  是爲了鼠標放上去即顯示出來滾動條，由於設置了fadeScrollbars淡入淡出  */
59 }
60 </style>

 

 

 具體用法，查看iscroll5 api文檔，下面只簡單使用了一下其refresh()刷新方法

 1 <template>
 2 <fly-iscroll ref="right">
 3 <router-view></router-view>
 4 </fly-iscroll>
 5 </template>
 6 
 7 <script>
 8 export default {
 9 data() {
10 return {
11 
12 }
13 },
14 updated() {
15 this.$nextTick(() => {
16 this.$refs.right.scroll.refresh(); //this.$refs.right.scroll即獲得了其實例化後的滾動條，就能夠直接調用iscroll5中的一些方法了。
17 });
18 }
19 }
20 </script>