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>

 

Logo

前往低代码交流专区

更多推荐