开始上手

提示

自从4.10.1版本以后, 你无需再引入 vuescroll/dist/vuescroll.css 文件了。

安装

模块系统

安装

  npm i -S
  # 或者通过yarn
  yarn add vuescroll
  # 或者通过cnpm
  cnpm i -S

引入

  1. 全局引入

在你的入口文件处:

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'
  }
};
  1. 局部引入
<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 函数。

上次更新: 2019-2-1 08:29:14