vuescroll-一款基于vuejs2.x的虚拟滚动条

介绍

Vuescroll 一个功能强大，有多种模式的基于Vue.js的滚动条插件，它的原理是建立 div 用于包裹要滚动的内容，操后操做容器的样式或者scrollTop或scrollLeft完成内容的滚动。

设计它的目的是用来美化和加强你的滚动条。

你能够经过更改配置来选择不一样的模式:

• native 模式: 相似于原生的滚动条，可是能够自定义滚动条样式，使用于 PC 端用户。
• slide 模式: 容许你用手指或鼠标滑动内容， 能够滑动超出边界范围，适用于移动端端用户。

你也能够经过更改配置滚动条的样式，包括：

• 透明度
• 高度/宽度
• 位置
• 背景色
• 是否保持显示

想了解更多请访问官方网站 指南页面

若是你不知足上述特性，想要扩展特性的话，请考虑贡献代码。

总的来讲，Vuescroll 不单单只一个滚动条， 你能够用它制做一个轮播图、时间选择器、可以自动侦测内容发生变化的一个插件等等。下面是部分预览效果。

预览

在线 Demo & 文档

• 你能够浏览这个 repo 的根目录下的 Demo 文件夹。
• 详细的 Demo, 文档: 请访问 官方地址.

特色

基本特色

• 支持自定义滚动条，包括能够设置滚动条/轨道的颜色、透明度。能够设置滚动条是否保持显示。
• 支持平滑滚动，能够经过设置easing来得到不一样的滚动动画。
• 支持自动检测内容是否发生变化，能够查看这个demo。

只在 slide 模式下有效的特色

• 支持下拉刷新和上推加载，具体能够查看这个demo和这个 SSR 版本的demo。
• 支持截断配置,每次滚动固定的距离。能够查看这个 demo
• 支持分页。能够查看这个 demo

其余特色

• 支持 typescript
• 支持 SSR, 能够查看这个 demo

快速开始

引入

在你的入口文件处：

import Vue from 'vue';
import vuescroll from 'vuescroll';
import 'vuescroll/dist/vuescroll.css';

Vue.use(vuescroll);

为了去掉不会用到的部分，能够分开地引入 vuescroll

只引入 slide 模式的特性

import Vue from 'vue';
import vuescroll from 'vuescroll/dist/vuescroll-slide';
import 'vuescroll/dist/vuescroll.css';

Vue.use(vuescroll);

只引入 native 模式的特性：

import Vue from 'vue';
import vuescroll from 'vuescroll/dist/vuescroll-native';
import 'vuescroll/dist/vuescroll.css';

Vue.use(vuescroll);

用法

把你须要滚动的内容用vuescroll包裹起来便可

<template>
    <div class='your-container'>
        <!-- bind your configurations -->
        <vue-scroll :ops="ops">
            <div class='your-content'>
            </div>
        </vue-scroll>
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          ops: {
            // some configs....
          }
        }
      }
    }
  </script>

指南列表

• 在线例子
• 上手指南
• 配置项
• API 参考
• Event 参考
• Slot 参考

最后

附上项目的地址 但愿朋友们多多star 哈哈