- A+
所属分类：Web前端
愿你有诗有梦，有坦荡荡的远方
本文声明：这是一篇学习coderwhy老师的vue2课程的一个笔记,所以本文章是在vue项目中实现，没学过vue的大佬们可以举一反三。
使用场景及介绍
BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的iscroll的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。
安装
npm install @better-scroll/core --save
基本使用
<div class="wrapper" ref="wrapper"> <ul class="scroll-content"> ... </ul> </div>
data() { return { scroll: null, }; }, mounted() {//不用created，因为那时候还没将元素放上去 this.scroll = new betterScroll(this.$refs.wrapper,{ // ...... 详见配置项 }); }, ...
常见配置项
1. click
- 类型：boolean
- 默认值：false
- 作用：BetterScroll 默认会阻止浏览器的原生 click 事件。当设置为 true，BetterScroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 `_constructed`，值为 true。
2. probeType
- 类型：number
- 默认值：0
- 可选值：1|2|3
- 作用：决定是否派发 scroll 事件，对页面的性能有影响，尤其是在 `useTransition` 为 true 的模式下。
// 派发 scroll 的场景分为两种： // 1. 手指作用在滚动区域（content DOM）上; // 2. 调用 scrollTo 方法或者触发 momentum 滚动动画（其实底层还是调用 scrollTo 方法） // 对于 v2.1.0 版本，对 probeType 做了一次统一 // 1. probeType 为 0，在任何时候都不派发 scroll 事件， // 2. probeType 为 1，仅仅当手指按在滚动区域上，每隔 momentumLimitTime 毫秒派发一次 scroll 事件， // 3. probeType 为 2，仅仅当手指按在滚动区域上，一直派发 scroll 事件， // 4. probeType 为 3，任何时候都派发 scroll 事件，包括调用 scrollTo 或者触发 momentum 滚动动画
3. pullUpLoad
- 类型：Boolean | Object
- 默认值：false
- 作用：这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，例如：
pullUpLoad:true,//相当于pullUpLoad:{ threshold:0 }
可以配置离（`threshold`）来决定开始加载的时机。
封装成一个独立组件
<template> <div ref="wrapper" class="wrapper"> <div> <slot></slot> </div> </div> </template> <script> import BScroll from "better-scroll"; export default { name: "BetterScroll", data() { return { bs: null, }; }, props: { probeType: { type: Number, default: 0, }, pullUpLoad: { type: Boolean, default: false, }, }, mounted() { setTimeout(() => { this.bs = new BScroll(this.$refs.wrapper, { probeType: this.probeType, click: true, pullUpLoad: this.pullUpLoad, }); this.bs.on("scroll", (option) => { this.$emit("scroll", option); }); this.bs.on("pullingUp", () => { this.$emit("pullingUp"); setTimeout(() => { this.bs.finishPullUp(); }, 2000); }); }, 1000); }, methods: { scrollTo(x, y, time = 500) { this.bs&&this.bs.scrollTo(x, y, time); }, refresh(){ this.bs&&this.bs.refresh(); } }, }; </script> <style scoped> .wrapper { overflow: hidden; } </style>
使用组件
import betterScroll from "better-scroll";
<better-scroll :probeType="3" :pullUpLoad="true" @scroll="contentScroll" @pullingUp="contentPullingUp" >
做世界的水手，奔赴所有的港口
