文章目录

介绍
- 最常见的应用场景是列表滚动
- 滚动原理
安装
- 全部安装
- 按需安装（推荐）
插件
- 使用插件
- 常用插件
- - pullUp
  - observe-dom
  - observe-image
常用配置项
- click
- probeType
常用注意事项
- 在vue中使用建议用ref属性绑定scroll对象

介绍

BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。
它的核心是借鉴的 iscroll (opens new window)的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。

最常见的应用场景是列表滚动

<div class="wrapper"><ul class="content"><li>...</li><li>...</li>...</ul><!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

上面的代码中 BetterScroll 是作用在外层 wrapper 容器上的，滚动的部分是 content 元素。
注意：BetterScroll 默认处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。

滚动原理

浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；
当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。
也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。
BetterScroll 也是一样的原理，我们可以用一张图更直观的感受一下：

绿色部分为 wrapper，也就是父容器，它会有固定的高度。
黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。
那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 BetterScroll 的滚动原理。

安装

全部安装

我们可以通过以下方式安装具备所有插件能力的 BetterScroll：

npm install better-scroll --save

如果你觉得一个个引入插件很费事，我们提供了一个拥有全部插件能力的 BetterScroll 包。

它的使用方式与 1.0 版本一模一样，但是体积会相对大很多，推荐按需引入。

按需安装（推荐）

如果你只需要一个拥有基础滚动能力的列表，只需要引入 core。
在 BetterScroll 2.0 的设计当中，我们抽象了核心滚动部分，它作为 BetterScroll 的最小使用单元，压缩体积比 1.0 小了将近三分之一，往往你可能只需要完成一个纯粹的滚动需求，那么你只需要引入这一个库，方式如下：

import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {// ...... 详见配置项
})

如果你需要一些额外的 feature。比如 pull-up，你需要引入额外的插件，详情查看插件。

import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'// 注册插件
BScroll.use(Pullup)let bs = new BScroll('.wrapper', {probeType: 3,pullUpLoad: true
})

插件

使用插件

通过全局方法 BScroll.use() 使用插件。它需要在你调用 new BScroll() 之前完成：

  import BScroll from '@better-scroll/core'import Plugin from 'somewhere'BScroll.use(Plugin)new BScroll('.wrapper', {pluginKey: {} // pluginKey 对应 Plugin 类上静态属性 pluginName 的值，否则插件无法实例化})

常用插件

pullUp

pullup 插件为 BetterScroll 扩展上拉加载的能力。

安装：

npm install @better-scroll/pull-up --save

使用：

  import BScroll from '@better-scroll/core'import Pullup from '@better-scroll/pull-up'BScroll.use(Pullup)

配置：

this.scroll = new BScroll('.bs-wrapper', {pullUpLoad: true})

事件：
pullingUp
参数：无
触发时机：当距离滚动到底部小于 threshold 值时，触发一次 pullingUp 事件。

当 threshold 为正数，代表距离滚动边界 threshold 像素的时候触发 pullingUp，反之，代表越过滚动边界才会触发事件

警告：

监测到上拉刷新的动作之后，pullingUp 事件的消费机会只有一次，因此你需要调用 finishPullUp() 来告诉 BetterScroll 来提供下一次 pullingUp 事件的消费机会。

一般用来完成上拉加载功能。

this.scroll.on('pullingUp', () => {...
})

observe-dom

开启对 content 以及 content 子元素 DOM 改变的探测。当插件被使用后，当这些 DOM 元素发生变化时，将会触发 scroll 的 refresh 方法。 observe-dom 插件具有以下几个特性：

针对改变频繁的 CSS 属性，增加 debounce
如果改变发生在 scroll 动画过程中，则不会触发 refresh
安装：

npm install @better-scroll/observe-dom --save

使用：

import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
BScroll.use(ObserveDOM)new BScroll('.bs-wrapper', {//...observeDOM: true // 开启 observe-dom 插件
})

注意：无法探测到 img 标签的是否加载完成，需要observe-image插件

observe-image

一般情况下，我们请求图片数据还没有到达，可滚动尺寸却被确定了，此时可滚动尺寸小于实际的高度，需要刷新可滚动尺寸，就需要用到该插件。（有防抖功能）

开启对 wrapper 子元素中图片元素的加载的探测。无论图片的加载成功与否，都会自动调用 BetterScroll 的 refresh 方法来重新计算可滚动的宽度或者高度，新增于 v2.1.0 版本。
提示：对于已经用 CSS 确定图片宽高的场景，不应该使用该插件，因为每次调用 refresh 对性能会有影响。只有在图片的宽度或者高度不确定的情况下，你才需要它。
安装：

npm install @better-scroll/observe-dom --save

使用：

import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
BScroll.use(ObserveDOM)new BScroll('.bs-wrapper', {//...observeDOM: true // 开启 observe-dom 插件
})

observeImage 选项对象：
提示：当 observeImage 配置为 true 的时候，插件内部使用的是默认的插件选项对象。

const bs = new BScroll('.wrapper', {observeImage: true
})// 相当于const bs = new BScroll('.wrapper', {observeImage: {debounceTime: 100 // ms}
})

debounceTime
类型： number
默认值： 100

探测到图片加载成功或者失败后，过 debounceTime 毫秒后才会调用 refresh 方法，重新计算可滚动的高度或者宽度，如果在 debounceTime 毫秒内有多张图片加载成功或者失败，只会调用一次 refresh。

提示：当 debounceTime 为 0 的时候，会立马调用 refresh 方法，而不是使用 setTimeout。

常用配置项

click

类型：boolean
默认值：false
作用：BetterScroll 默认会阻止浏览器的原生 click 事件。当设置为 true，BetterScroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true。
一般我们需要将click设置为true。

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 滚动动画

常用注意事项

在vue中使用建议用ref属性绑定scroll对象

如果在大型项目中有多处使用wrapper作为类名称，那么querySelecter会选择第一个。
但是使用ref属性可以精确定位到我们选择的element元素。

项目中better-scroll的常用配置、插件介绍相关推荐

Android项目中最火最常用的优秀开源项目（很有用）
Android项目中最火最常用的优秀开源项目分类详细框架名称简介 Star 数最近更新 UI 刷新 SmartRefreshLayout Android 智能下拉刷新框架 7.7k 1天 ...
VB.NET 在项目中添加App.config的配置
右击项目,选择属性, 在属性中选择Settings选项卡,Scope选择User 这样就会在项目中添加了App.config配置内容: <?xml version="1.0" ...
Maven实战——常用Maven插件介绍
http://www.infoq.com/cn/news/2011/04/xxb-maven-7-plugin 我们都知道Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任 ...
常用Maven插件介绍（下）（转）
我们都知道Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,例如编译源代码是由maven- compiler-plugin完成的.进一步说,每个任务对应 ...
干货分享：实用/高效/有逼格的Android Studio 常用配置/插件推荐
注释模板前言 Gradle Build Running 手动下载Gradle 正确导入他人项目手动下载SDK 禁用HTTP代理使用阿里maven仓库 JCenter/mavenCentral() ...
vue项目中的小知识--快捷键-vue插件版本号--vscode插件等
vue项目中的小知识--快捷键等 0 版本号 1 代码片段的获取: 2 vscode中一些常用扩展 3 进入另一个文件夹,返回上一级 4查看Vue的版本和Vue/CLI的版本 5 --save-dev ...
vue项目中vue-echarts讲解及常用图表方案实现
图表类的项目操作一般常见于管理平台系统,移动端项目中并不是特别常见,不常见不代表没有,在一些商城类应用中,商家需要看到商品的销量分析,盈利分析等,就需要用到图标,比较常用的图标库,像百度的ECHART ...
Tinymce富文本编辑器在vue项目中的使用；引入第三方插件和上传视频、图片等
先放张效果图第一步:安装依赖 npm install tinymce@5.0.12 第二步:在项目中的public文件夹中新建tinymce文件夹(因为我的项目是脚手架创建的,所以公共文件夹是pub ...
java和opencv配置_Java——OpenCVWindows配置和项目中jar包的简单配置
1. 安装OpenCV 1.1 下载相应的OpenCV版本,解压 1.2 将 openCV的dll文件(D:\InstallPackages\OpenCV\opencv\build\java\x64) ...
java web access_Java Web项目中连接Access数据库的配置方法
本文是对前几天的"JDBC连接Access数据库的几种方式"这篇的升级.因为在做一些小项目的时候遇到的问题,因此才决定写这篇博客的.昨天已经将博客公布了.可是后来经过一些验证有点问 ...

项目中better-scroll的常用配置、插件介绍