# 开始上手
提示
自从4.10.1版本以后， 你无需再引入 vuescroll/dist/vuescroll.css 文件了。
# 安装
# 模块系统
# 安装
npm i -S
# 或者通过yarn
yarn add vuescroll
# 或者通过cnpm
cnpm i -S
# 引入
- 全局引入
在你的入口文件处：
import Vue from 'vue';
import vuescroll from 'vuescroll';
// 你可以在这里设置全局配置
Vue.use(vuescroll, {
ops: {}, // 在这里设置全局默认配置
name: 'myScroll' // 在这里自定义组件名字，默认是vueScroll
});
/*
* 或者
*/
Vue.use(vuescroll); // install the vuescroll first
Vue.prototype.$vuescrollConfig = {
bar: {
background: '#000'
}
};
- 局部引入
<template>
<vuescroll> <!-- 你的内容... --> </vuescroll>
</template>
<script>
import vuescroll from 'vuescroll';
export default {
components: {
vuescroll
}
};
</script>
# 只引入需要的模式
只引入 slide 模式的特性：
import Vue from 'vue';
import vuescroll from 'vuescroll/dist/vuescroll-slide';
Vue.use(vuescroll);
只引入 native 模式的特性：
import Vue from 'vue';
import vuescroll from 'vuescroll/dist/vuescroll-native';
Vue.use(vuescroll);
# 浏览器环境
直接通过 CDN 方式引入
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuescroll"></script>
<!-- 引入vuescroll-slide -->
<script src="https://unpkg.com/vuescroll/dist/vuescroll-slide.js"></script>
<!-- 引入vuescroll-native -->
<script src="https://unpkg.com/vuescroll/dist/vuescroll-native.js"></script>
# 用法
把 vuescroll 放在
parent-dom里面，child-dom外面即可。 就是这么简单。
警告
如果你看不到滚动条， 请打开dev-tool是否你的子元素尺寸超过了你的父元素尺寸。 出现滚动条的条件与原生滚动条的相同， 即： 子元素的尺寸超出了父元素。
<template>
<div class="parent-dom">
<!-- bind your configurations -->
<vue-scroll :ops="ops"> <div class="child-dom"></div> </vue-scroll>
</div>
</template>
<script>
export default {
data() {
return {
ops: {
vuescroll: {},
scrollPanel: {},
rail: {},
bar: {}
}
}
}
}
</script>
提示
如果你有紧急情况， 可以调用 refresh 函数。