vue实践之项目积累-----vue滚动条插件----vuescroll

vuescroll 是一款基于 Vue.js 自定义滚动条的插件，它有两种模式:

• native: 适用于 PC 端， 支持基本的自定义滚动条。

• slide: 适用于移动端， 支持下拉-加载，上拉刷新，轮播等。

---

本地安装

  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>

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>