BetterScroll
## 安装 ``` @better-scroll/scroll-bar @better-scroll/mouse-wheel @better-scroll/core ``` ## 快速使用 ``` <template> <div ref="wrapper" class="wrapper"> <ul class="content"> <li v-for="item in 30" :key="item">Item {{ item }}</li> </ul> </div> </template> <script> // 滚动条插件 import Scrollbar from '@better-scroll/scroll-bar' // 滚轮插件 import MouseWheel from '@better-scroll/mouse-wheel'; import BScroll from "@better-scroll/core"; BScroll.use(Scrollbar) BScroll.use(MouseWheel) export default { name: 'ScrollComponent', mounted() { this.$nextTick(() => { new BScroll(this.$refs.wrapper, { scrollY: true, mouseWheel: { speed: 20, invert: false, easeTime: 300 }, scrollbar: { fade: true, interactive: true, scrollbarTrackClickable: true, } }) }) }, } </script> <style scoped> .wrapper { height: 300px; border: 1px solid #ccc; overflow: hidden; } .content { padding: 0; margin: 0; list-style: none; } .content li { padding: 20px; text-align: center; border-bottom: 1px solid #eee; } </style> ``` ## 常用方法 | 方法 | 作用 | | ---- | --- | | refresh() | 刷新滚动条 | | enable() | 启用滚动条 | | disable() | 禁用滚动条 | | destroy() | 销毁滚动条 | | scrollTo(x, y, time, easing, extraTransform) | 滚动到指定距离 |
创建时间:2024-04-06
|
最后修改:2024-04-06
|
©允许规范转载
酷酷番茄
首页
文章
友链