文章目录
一、BetterScroll 是什么?
BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件.
二、BetterScroll的使用
- 安装 :
npm install @better-scroll/core --save
- 导入 :
import Bscroll from '@better-scroll/core'
- 创建一个BetterScroll对象, 并使用一个变量接收它 :
this.scroll = new Bscroll(document.querySelector(".wrapper"), {
})
三、BetterScroll的可选参数
1. probeType
- probeType作用:决定是否派发 scroll 事件,probeType 为 0,在任何时候都不派发 scroll 事件,
- probeType 为 2,仅仅当手指按在滚动区域上,每隔 momentumLimitTime 毫秒派发一次 scroll 事件,
- probeType 为 3,任何时候都派发 scroll 事件,包括调用 scrollTo 或者触发 momentum 滚动动画
2. click
- BetterScroll 默认会阻止浏览器的原生 click 事件。当设置为 true,BetterScroll 会派发一个 click 事件
3. pullUpLoad
- 上拉加载更多, 监听是否已经滚动到底部
- 默认为false, 当设置为true或者是一个object的时候, 开启上拉加载.
四、实时监听BetterScroll滚动的位置
- 调用
bscroll
的on
方法监听滚动事件. - on方法需要传递两个参数, 第一个是事件类型, 第一个参数是一个函数, 函数本身有一个参数 position, position里面存的是 x和y轴的坐标值
五、BetterScroll可监听的事件
- scroll : 滚动事件
- pullingUp : 当距离滚动到底部小于 threshold 值时,触发一次 pullingUp 事件。
!!! 这里出现一个错误
当时导入的时候, 是使用script标签引入的
<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.js"></script>
引入的这个是没有任何插件, 无法实现上拉加载,
需要换成这个引入
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>
创建BScroll的方式也需要变化
const scroll = BetterScroll.createBScroll(document.querySelector('.wrapper'),{
pullUpLoad: true
})
六、上拉加载更多
<script>
const bscroll = BetterScroll.createBScroll(document.querySelector('.content'), {
// 任何时候都派发 scroll 事件
probeType: 3,
// 开启上拉加载更多
pullUpLoad: true
})
bscroll.on("scroll", (position) => {
// console.log(position);
})
// 上拉加载更多
bscroll.on("pullingUp", () => {
console.log("上拉加载更多");
// 等数据请求完成, 并且将新的数据展示出来后, 开启下一次的上拉加载更多
bscroll.finishPullUp()
})
</script>
七、BScroll的封装以及使用
- 创建一个Scroll组件
- 在scroll组件里面放一个插槽