介紹：
Vuescroll 一個功能強大，有多種模式的基于Vue.js的滾動條插件霜定，它的原理是創(chuàng)建 div 用于包裹要滾動的內(nèi)容，操后操作容器的樣式或者scrollTop或scrollLeft完成內(nèi)容的滾動。
native 模式: 類似于原生的滾動條爆侣，但是可以自定義滾動條樣式恩闻，使用于 PC 端用戶艺糜。
slide 模式: 允許你用手指或鼠標(biāo)滑動內(nèi)容， 可以滑動超出邊界范圍，適用于移動端端用戶破停。
你也可以通過更改配置滾動條的樣式翅楼，包括：
透明度
高度/寬度
位置
背景色
是否保持顯示
基本特點
- 支持[自定義滾動條]包括可以設(shè)置滾動條/軌道的
顏色、透明度真慢∫汶可以設(shè)置滾動條是否保持顯示。 - 支持平滑滾動黑界，可以通過設(shè)置[easing]來獲得不同的滾動動畫管嬉。
- 支持自動檢測內(nèi)容是否發(fā)生變化
只在 slide 模式下有效的特點
- 支持[下拉刷新和上推加載]
- 支持截斷配置,每次滾動固定的距離。
- 支持分頁朗鸠。
其他特點
- 支持 [typescript] 支持 SSR,
官網(wǎng)：https://vuescrolljs.yvescoding.org/zh/
安裝：npm install vuescroll -S yarn add vuescroll -S
使用：
main.js
import vuescroll from 'vuescroll';
// 在這里設(shè)置全局配置
Vue.use(vuescroll, {
ops: {
mode: 'native',
bar: {
showDelay: 500,
onlyShowBarOnScroll: false,//是否只有滾動的時候才顯示滾動條
keepShow: false,
background: '#1AB063',
opacity: 0.2,
hoverStyle: false,
specifyBorderRadius: false,
minSize: false,
size: '6px',
disable: false,
'overflow-x': 'hidden',
}
}, // 在這里設(shè)置全局默認配置
name: 'vueScroll' // 在這里自定義組件名字蚯撩，默認是vueScroll
});
index.vue
//把你需要滾動的內(nèi)容用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>
