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 哈哈