基于 vue 实现的 pc 端滚动条组件
开始使用
下载
npm install @wozien/vue-scrollbar
引入组件
<template>
<vue-scrollbar :show-type="hover" ref="scroll">
<!-- 滚动内容包含在一个块内 -->
<div class="container">
<!-- 滚动内容 -->
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<!-- ... -->
</div>
</vue-scrollbar>
</template>
<script>
import VueScrollbar from '@wozien/vue-scrollbar';
export default {
mounted() {
this.$ref.scroll.scrollTo(0, 100);
},
components: {
VueScrollbar
}
};
</script>
说明
属性
- show-type:String: 滚动条显示方式,默认为一直显示
- hide: 隐藏
- hover: 移入显示
- scrollTo(x,y): 移动到指定位置
- x: 横坐标
- y: 纵坐标
- refresh(): 刷新,重新计算高度
- scrollTop(): 移动最顶部
- scrollBottom(): 移动最底部
- scrollLeft(): 移动最左边
- scrollRight(): 移动最右边