Vue 滚动插件 Better-Scroll 使用详解
插件介绍
- Better-Scroll 是一款使用原生 JS 实现的插件，专门用于创建滚动效果的插件。
- 支持 Vue、React、Angular 等主流框架。
- 优点: 轻量、流畅、具有很好的兼容性、可以自定义样式和配置。
安装
可以使用 npm 安装 Better-Scroll 。
npm install better-scroll --save
基本用法
在 Vue 组件中引用：
<template>
<div class="wrapper">
<div ref="scrollWrapper">
<ul>
<li v-for="item in list" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
data() {
return {
list: []
}
},
mounted() {
// 初始化 Better-Scroll
const scroll = new BScroll(this.$refs.scrollWrapper)
}
}
</script>
高级用法
1. 配置项
- Better-Scroll 提供了一系列的配置项，可以在初始化的时候传入。可以使用默认的配置项，也可以自己配置。
- 可以通过
配置项.probeType配置 BScroll 监听滚动事件的频率，分为 0、1、2 三个等级，0 表示不监听，1 表示实时监听但有一定的限制（不会派发 scroll 事件），2 是实时滚动监听。
<template>
<div class="wrapper">
<div ref="scrollWrapper">
<ul>
<li v-for="item in list" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
data() {
return {
list: []
}
},
mounted() {
const scroll = new BScroll(this.$refs.scrollWrapper, {
probeType: 2 // 实时滚动监听
})
}
}
</script>
2. 滚动到指定位置
- 使用 Better-Scroll 提供的
scrollTo(x, y, time, easing)方法可以滚动到指定位置。 x和y表示横向和纵向的偏移量。time表示滚动的时间，单位是毫秒。easing表示运动方式（默认为cubic-bezier(0.25, 0.46, 0.45, 0.94)）。
<template>
<div class="wrapper">
<button @click="handleClick">滚动到底部</button>
<div ref="scrollWrapper">
<ul>
<li v-for="item in list" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
data() {
return {
list: []
}
},
mounted() {
const scroll = new BScroll(this.$refs.scrollWrapper, {
probeType: 2 // 实时滚动监听
})
this.scroll = scroll
},
methods: {
handleClick() {
// 滚动到底部，执行时间 500 毫秒
this.scroll.scrollTo(0, this.scroll.maxScrollY, 500)
}
}
}
</script>
示例
下面是一些使用 Better-Scroll 的示例：
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue滚动插件better-scroll使用详解 - Python技术站
微信扫一扫 
支付宝扫一扫 