介紹

Vuescroll 一個功能強大，有多種模式的基于Vue.js的滾動條插件，它的原理是創(chuàng)建 div 用于包裹要滾動的內(nèi)容，操后操作容器的樣式或者scrollTop或scrollLeft完成內(nèi)容的滾動。

設計它的目的是用來美化和增強你的滾動條。

你可以通過更改配置來選擇不同的模式:

native 模式: 類似于原生的滾動條，但是可以自定義滾動條樣式，使用于 PC 端用戶。

slide 模式: 允許你用手指或鼠標滑動內(nèi)容， 可以滑動超出邊界范圍，適用于移動端端用戶。

你也可以通過更改配置滾動條的樣式，包括：

透明度

高度/寬度

位置

背景色

是否保持顯示

想了解更多請訪問官方網(wǎng)站指南頁面

如果你不滿足上述特性，想要擴展特性的話，請考慮貢獻代碼。

總的來說，Vuescroll 不僅僅只一個滾動條， 你可以用它制作一個輪播圖、時間選擇器、能夠自動偵測內(nèi)容發(fā)生變化的一個插件等等。下面是部分預覽效果。

預覽

在線 Demo & 文檔

你可以瀏覽這個 repo 的根目錄下的 Demo 文件夾。

詳細的 Demo, 文檔: 請訪問 官方地址.

特點

基本特點

支持自定義滾動條，包括可以設置滾動條/軌道的顏色、透明度。可以設置滾動條是否保持顯示。

支持平滑滾動，可以通過設置easing來獲得不同的滾動動畫。

支持自動檢測內(nèi)容是否發(fā)生變化，可以查看這個demo。

只在 slide 模式下有效的特點

支持下拉刷新和上推加載，具體可以查看這個demo和這個 SSR 版本的demo。

支持截斷配置,每次滾動固定的距離。可以查看這個 demo

支持分頁。可以查看這個 demo

其他特點

支持 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);

用法

把你需要滾動的內(nèi)容用vuescroll包裹起來即可

export default {

data() {

return {

ops: {

// some configs....

}

}

}

}

指南列表

最后

附上項目的地址 希望朋友們多多star 哈哈

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的vuejs滚动条_vuescroll-一款基于vuejs2.x的虚拟滚动条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。