Question

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

npm install @better-scroll/core --save

import BScroll from '@better-scroll/core'
const bs = new BScroll('.div')

上手

BetterScroll 有多种滚动模式。

• 垂直滚动

  <<< @/examples/vue/components/core/default.vue?template <<< @/examples/vue/components/core/default.vue?script <<< @/examples/vue/components/core/default.vue?style

  :::warning BetterScroll 实时派发 scroll 事件，是需要设置 probeType 为 3。 :::

• 水平滚动

  <<< @/examples/vue/components/core/horizontal.vue?template <<< @/examples/vue/components/core/horizontal.vue?script <<< @/examples/vue/components/core/horizontal.vue?style

  :::warning BetterScroll 实现横向滚动，对 CSS 是比较苛刻的。首先你要保证 wrapper 不换行，并且 content 的 display 是 inline-block。

  .scroll-wrapper
    // ...
    white-space nowrap
  .scroll-content
    // ...
    display inline-block
  

  :::

• freeScroll（水平与垂直同时滚动）

  <<< @/examples/vue/components/core/freescroll.vue?template <<< @/examples/vue/components/core/freescroll.vue?script <<< @/examples/vue/components/core/freescroll.vue?style

动态 content

对于 2.0.4 版本，已经具备了探测 content 元素变成其他元素的能力，可以查看下面的例子。

<<< @/examples/vue/components/core/dynamic-content.vue?template <<< @/examples/vue/components/core/dynamic-content.vue?script <<< @/examples/vue/components/core/dynamic-content.vue?style

specifiedIndexAsContent

对于 2.0.4 版本，可以指定 wrapper 的某一个 children 作为 content，在之前的版本，BetterScroll只会处理 wrapper 的第一个子元素。详细的文档在这。

<<< @/examples/vue/components/core/specified-content.vue?template <<< @/examples/vue/components/core/specified-content.vue?script <<< @/examples/vue/components/core/specified-content.vue?style

quadrant

对于 2.3.0 版本，如果 BetterScroll 的 wrapper DOM 的父元素或者祖先元素发生旋转，可以通过 quadrant 选项来修正用户的交互行为。

• 竖向滚动强制变换成横向滚动

<<< @/examples/vue/components/core/vertical-rotated.vue?template <<< @/examples/vue/components/core/vertical-rotated.vue?script <<< @/examples/vue/components/core/vertical-rotated.vue?style

• 横向滚动强制翻转

<<< @/examples/vue/components/core/horizontal-rotated.vue?template <<< @/examples/vue/components/core/horizontal-rotated.vue?script <<< @/examples/vue/components/core/horizontal-rotated.vue?style

温馨提示

:::tip 任何时候如果出现无法滚动的情况，都应该首先查看 content 元素高度/宽度是否大于 wrapper 的高度/宽度。这是内容能够滚动的前提条件。

如果内容存在图片的情况，可能会出现 DOM 元素渲染时图片还未下载，因此内容元素的高度小于预期，出现滚动不正常的情况。此时你应该在图片加载完成后，比如 onload 事件回调中，调用 bs.refresh 方法，它会重新计算最新的滚动距离。 :::