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>
