### Initialize BetterScroll (All Plugins)

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/guide/how-to-install.md

Example of initializing BetterScroll using the `createBScroll` static method, typically used when loading the full package via script.

```js
let bs = BetterScroll.createBScroll('.wrapper', {})
```

--------------------------------

### Initialize BetterScroll (Core)

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/guide/how-to-install.md

Basic example of initializing BetterScroll with a DOM element. Requires the BetterScroll core library to be loaded.

```js
let wrapper = document.getElementById("wrapper")
let bs = new BScroll(wrapper, {})
```

--------------------------------

### Install BetterScroll with All Plugins via NPM/Yarn

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/guide/how-to-install.md

Installs the main BetterScroll package which includes all plugins. Use this if you need the full suite of features out-of-the-box.

```bash
npm install better-scroll --save

// or

yarn add better-scroll
```

--------------------------------

### Usage Example for BetterScroll Zoom Plugin

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/zoom/README.md

Demonstrates how to import and initialize the BetterScroll Zoom plugin. It shows the necessary imports, BScroll instantiation, and configuration options for zoom functionality, including start, min, and max zoom levels.

```javascript
import BScroll from '@better-scroll/core'
import Zoom from '@better-scroll/zoom'
BScroll.use(Zoom)

const bs = new BScroll('.zoom-wrapper', {
  freeScroll: true,
  scrollX: true,
  scrollY: true,
  disableMouse: true,
  useTransition: true,
  zoom: {
    start: 1,
    min: 0.5,
    max: 2
  }
})
```

--------------------------------

### Install BetterScroll Movable Plugin

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/movable.md

Instructions for installing the movable plugin using npm or yarn.

```bash
npm install @better-scroll/movable --save

// or

yarn add @better-scroll/movable
```

--------------------------------

### Basic Scrolling with Better-scroll Core

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/guide/use.md

Demonstrates the fundamental setup for better-scroll using the core module. This is suitable for basic scrolling needs without additional features. It requires importing the core module and initializing it with a DOM element selector.

```js
import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {
  // ...... see options
})
```

--------------------------------

### Install observe-image Plugin (Bash)

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/observe-image.md

Instructions for installing the observe-image plugin using package managers. This step is necessary before integrating the plugin into your project.

```bash
npm install @better-scroll/observe-image --save
```

```bash
yarn add @better-scroll/observe-image
```

--------------------------------

### Install @better-scroll/observe-image (bash)

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/plugins/observe-image.md

Installs the @better-scroll/observe-image plugin using either npm or yarn. This is the initial step required to integrate the image observation functionality into your BetterScroll setup.

```bash
npm install @better-scroll/observe-image --save

// or

yarn add @better-scroll/observe-image
```

--------------------------------

### Import BetterScroll Core (CommonJS)

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/guide/how-to-install.md

Shows how to import the BetterScroll core module using CommonJS syntax, suitable for Node.js environments or older build setups.

```js
var BScroll = require('@better-scroll/scroll')
```

--------------------------------

### Install @better-scroll/indicators Plugin

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/indicators.md

Installs the @better-scroll/indicators plugin using npm or yarn. This is the first step to enable linked scrolling functionalities.

```bash
npm install @better-scroll/indicators --save

// or

yarn add @better-scroll/indicators
```

--------------------------------

### Install better-scroll slide

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/slide.md

Install the BetterScroll slide plugin using npm or yarn package managers.

```bash
npm install @better-scroll/slide --save

// or

yarn add @better-scroll/slide
```

--------------------------------

### Install BetterScroll Observe DOM Plugin

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/observe-dom.md

Instructions for installing the Observe DOM plugin using npm or yarn package managers.

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

// or

yarn add @better-scroll/observe-dom
```

--------------------------------

### Install better-scroll wheel plugin

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/wheel.md

Install the wheel plugin for better-scroll using either npm or yarn package managers.

```bash
npm install @better-scroll/wheel --save

// or

yarn add @better-scroll/wheel
```

--------------------------------

### Install mouse-wheel plugin

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/plugins/mouse-wheel.md

Install the mouse-wheel plugin for BetterScroll using npm or yarn package managers.

```bash
npm install @better-scroll/mouse-wheel --save

// or

yarn add @better-scroll/mouse-wheel
```

--------------------------------

### Install BetterScroll Indicators

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/plugins/indicators.md

Instructions for installing the BetterScroll Indicators plugin using npm or yarn. This is the first step before integrating it into your project.

```bash
npm install @better-scroll/indicators --save

// or

yarn add @better-scroll/indicators
```

--------------------------------

### Pullup Plugin Configuration Example

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/pullup.md

Demonstrates how the default pullUpLoad configuration (true) is equivalent to a specific threshold option.

```javascript
const bs = new BScroll('.wrapper', {
  pullUpLoad: true
})

// Equivalent to:

const bs = new BScroll('.wrapper', {
  pullUpLoad: {
    threshold: 0
  }
})
```

--------------------------------

### Install BetterScroll Packages

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/README_zh-CN.md

Installs the full BetterScroll package including all plugins, or the core package for minimal scrolling functionality.

```shell
npm install better-scroll -S

npm install @better-scroll/core
```

--------------------------------

### Install BetterScroll Wheel Plugin

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/plugins/wheel.md

Instructions for installing the BetterScroll wheel plugin using npm or yarn package managers. This step is necessary before integrating the plugin into your project.

```bash
npm install @better-scroll/wheel --save

// or

yarn add @better-scroll/wheel
```

--------------------------------

### Install Zoom Plugin

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/plugins/zoom.md

Instructions for installing the BetterScroll zoom plugin using npm or yarn package managers.

```bash
npm install @better-scroll/zoom --save

// or

yarn add @better-scroll/zoom
```

--------------------------------

### Install BetterScroll Pulldown Plugin

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/plugins/pulldown.md

Instructions for installing the BetterScroll pulldown plugin using npm or yarn package managers.

```bash
npm install @better-scroll/pull-down --save
```

```bash
yarn add @better-scroll/pull-down
```

--------------------------------

### Vue Component Example (Script)

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/pullup.md

Vue script logic for the pullup component example, including BetterScroll initialization and event handling.

```javascript
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'

BScroll.use(Pullup)

export default {
  data() {
    return {
      list: [],
      count: 1
    }
  },
  methods: {
    _initScroll() {
      this.bs = new BScroll('.bs-wrapper', {
        pullUpLoad: {
          threshold: -200
        },
        click: true
      })
      this.bs.on('pullingUp', this._pullUpHandler)
    },
    async _pullUpHandler() {
      await this._pullUpLoadMore()
      this.bs.finishPullUp()
      this.bs.refresh()
    },
    async _pullUpLoadMore() {
      await new Promise(resolve => {
        setTimeout(() => {
          const newList = []
          for (let i = 0; i < 20; i++) {
            newList.push(`list-${this.count++}`)
          }
          this.list = this.list.concat(newList)
          resolve()
        }, 1000)
      })
    }
  },
  mounted() {
    this._initScroll()
  }
}
```

--------------------------------

### Install BetterScroll Infinity Plugin

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/plugins/infinity.md

Installs the BetterScroll infinity plugin using npm or yarn package managers. This is the first step to integrate unlimited scrolling.

```shell
npm install @better-scroll/infinity --save
```

```shell
yarn add @better-scroll/infinity
```

--------------------------------

### Install BetterScroll Pulldown Plugin (bash)

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/pulldown.md

Installs the BetterScroll pulldown plugin using either npm or yarn. This is the initial step required to integrate the pull-to-refresh functionality into your project.

```bash
npm install @better-scroll/pull-down --save

// or

yarn add @better-scroll/pull-down
```

--------------------------------

### Vue Example: Horizontal Scrollbar

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/scroll-bar.md

Illustrates the implementation of a horizontal scrollbar within a Vue.js component using BetterScroll. This example shows the necessary setup for horizontal scrolling.

```vue
<template>
  <div class="bs-wrapper">
    <div class="bs-content">
      <!-- Content goes here -->
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'
import ScrollBar from '@better-scroll/scroll-bar'
import { defineComponent } from 'vue'

BScroll.use(ScrollBar)

export default defineComponent({
  mounted() {
    this.scroll = new BScroll('.bs-wrapper', {
      scrollX: true,
      scrollbar: true
    })
  },
  beforeUnmount() {
    if (this.scroll) {
      this.scroll.destroy()
    }
  }
})
</script>

<style>
.bs-wrapper {
  width: 300px;
  overflow: hidden;
}
.bs-content {
  display: flex;
  width: 600px; /* Example width for horizontal scrolling */
}
/* Add styles for scrollbar if needed */
</style>
```

--------------------------------

### BetterScroll Mouse Wheel Horizontal Scroll Example

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/mouse-wheel.md

A Vue component example demonstrating horizontal scrolling with the BetterScroll mouse-wheel plugin. It showcases basic setup for horizontal mouse wheel interaction.

```vue
<template>
  <div class="bs-wrapper">
    <div class="scroll-content">
      <!-- Content goes here -->
      <div v-for="item in 20" :key="item" class="horizontal-item">Item {{ item }}</div>
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'
import MouseWheel from '@better-scroll/mouse-wheel'

export default {
  mounted() {
    BScroll.use(MouseWheel)
    this.scroll = new BScroll('.bs-wrapper', {
      scrollX: true,
      scrollY: false,
      mouseWheel: {
        speed: 20,
        invert: false
      },
      wheel: {
        // wheel options if needed
      }
    })
  },
  beforeDestroy() {
    if (this.scroll) {
      this.scroll.destroy()
    }
  }
}
</script>

<style>
.bs-wrapper {
  width: 500px;
  overflow: hidden;
}
.scroll-content {
  display: flex;
  padding: 20px;
  width: 1000px; /* Ensure content is wider than wrapper */
}
.horizontal-item {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
```

--------------------------------

### Instantiate BetterScroll with a Plugin

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/plugins/how-to-write.md

Demonstrates how to import and use a custom plugin with BetterScroll. It shows how to register the plugin using `BScroll.use()` and pass options during instantiation. It also illustrates how to interact with proxied methods and events from the plugin.

```js
import BScroll from '@better-scroll/core'
import MyPlugin from '@better-scroll/my-plugin'

BScroll.use(MyPlugin)

const bs = new BScroll('.wrapper', {
  myPlugin: {
    scrollText: 'I am scrolling',
    scrollEndText: 'Scroll has ended'
  },
  // or
  myPlugin: true
})

// Use the event that is proxied to bs by plugin
bs.on('printScrollEndText', (scrollEndText) => {
  console.log(scrollEndText) // print "Scroll has ended, position is (xx, yy)"
})

// Use the method that is proxied to bs by plugin
bs.printScrollText() // print "I am scrolling"
```

--------------------------------

### Load BetterScroll with All Plugins via Script Tag

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/guide/how-to-install.md

Illustrates loading the complete BetterScroll library from a CDN using script tags, including minified versions.

```html
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>

<!-- minify -->
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>
```

--------------------------------

### BetterScroll Mouse Wheel Vertical Scroll Example

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/mouse-wheel.md

A Vue component example demonstrating vertical scrolling with the BetterScroll mouse-wheel plugin. It showcases basic setup for vertical mouse wheel interaction.

```vue
<template>
  <div class="bs-wrapper">
    <div class="scroll-content">
      <!-- Content goes here -->
      <div v-for="item in 50" :key="item">Item {{ item }}</div>
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'
import MouseWheel from '@better-scroll/mouse-wheel'

export default {
  mounted() {
    BScroll.use(MouseWheel)
    this.scroll = new BScroll('.bs-wrapper', {
      scrollY: true,
      scrollX: false,
      mouseWheel: {
        speed: 20,
        invert: false
      },
      wheel: {
        // wheel options if needed
      }
    })
  },
  beforeDestroy() {
    if (this.scroll) {
      this.scroll.destroy()
    }
  }
}
</script>

<style>
.bs-wrapper {
  height: 300px;
  overflow: hidden;
}
.scroll-content {
  padding: 20px;
}
</style>
```

--------------------------------

### Import BetterScroll with All Plugins (ES Modules)

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/guide/how-to-install.md

Demonstrates importing the main BetterScroll package using ES module syntax, providing access to all plugins.

```js
import BetterScroll from 'better-scroll'
let bs = new BetterScroll('.wrapper', {})
```

--------------------------------

### Initialize BetterScroll (Full)

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/README_zh-CN.md

Shows how to import the full BetterScroll library and initialize it with specific options like movable and zoom.

```javascript
import BetterScroll from 'better-scroll'
let bs = new BetterScroll('.wrapper', {
  movable: true,
  zoom: true
})
```

--------------------------------

### beforeMove Hook Example

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/guide/base-scroll-api.md

The 'beforeMove' hook is triggered before a scroll movement starts. It receives an event object as an argument, allowing inspection of the event details.

```javascript
import BScroll from '@better-scroll/core'
const bs = new BScroll('.wrapper', {})
const hooks = bs.scroller.actions.hooks
hooks.on('beforeMove', (event) => { console.log(event.target) })
```

--------------------------------

### Vue.js: Fullscreen Slide Demo

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/plugins/slide.md

Showcases a fullscreen sliding component with Better Scroll in Vue.js. This example covers the setup for full-page slide transitions.

```html
<<< @/examples/vue/components/slide/fullpage.vue?template
```

```javascript
<<< @/examples/vue/components/slide/fullpage.vue?script
```

```css
<<< @/examples/vue/components/slide/fullpage.vue?style
```

--------------------------------

### Initialize BetterScroll with Plugins

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/README_zh-CN.md

Demonstrates how to enable plugins like PullUp by passing configuration options during BetterScroll initialization.

```javascript
import BScroll from '@better-scroll/core'
import PullUp from '@better-scroll/pull-up'

let bs = new BScroll('.wrapper', {
  pullUpLoad: true
})
```

--------------------------------

### Vue Component: Double Column Picker

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/wheel.md

Example Vue component demonstrating a two-column picker setup using separate BScroll instances for each column.

```vue
<template>
  <div class="double-picker-wrapper">
    <div class="column-wrapper">
      <div class="bs-wrapper-col1">
        <div class="wheel-scroll-col1">
          <div class="wheel-item-col1">Col1-Item1</div>
          <div class="wheel-item-col1">Col1-Item2</div>
          <div class="wheel-item-col1">Col1-Item3</div>
        </div>
      </div>
    </div>
    <div class="column-wrapper">
      <div class="bs-wrapper-col2">
        <div class="wheel-scroll-col2">
          <div class="wheel-item-col2">Col2-ItemA</div>
          <div class="wheel-item-col2">Col2-ItemB</div>
          <div class="wheel-item-col2">Col2-ItemC</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core';
import Wheel from '@better-scroll/wheel';

BScroll.use(Wheel);

export default {
  mounted() {
    this.bs1 = new BScroll('.bs-wrapper-col1', {
      wheel: {
        wheelWrapperClass: 'wheel-scroll-col1',
        wheelItemClass: 'wheel-item-col1'
      },
      scrollX: false,
      scrollY: true,
      probeType: 3
    });

    this.bs2 = new BScroll('.bs-wrapper-col2', {
      wheel: {
        wheelWrapperClass: 'wheel-scroll-col2',
        wheelItemClass: 'wheel-item-col2'
      },
      scrollX: false,
      scrollY: true,
      probeType: 3
    });
  },
  beforeDestroy() {
    if (this.bs1) this.bs1.destroy();
    if (this.bs2) this.bs2.destroy();
  }
};
</script>

<style>
.double-picker-wrapper {
  display: flex;
  width: 400px;
  height: 200px;
  overflow: hidden;
}
.column-wrapper {
  flex: 1;
  height: 100%;
  overflow: hidden;
}
.bs-wrapper-col1, .bs-wrapper-col2 {
  width: 100%;
  height: 100%;
}
.wheel-scroll-col1, .wheel-scroll-col2 {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wheel-item-col1, .wheel-item-col2 {
  padding: 10px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
</style>
```

--------------------------------

### Load BetterScroll Core via Script Tag

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/guide/how-to-install.md

Illustrates loading the BetterScroll core library directly from a CDN using script tags. Supports both standard and minified versions.

```html
<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.js"></script>

<!-- minify -->
<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.min.js"></script>
```

--------------------------------

### Better-scroll Full Package for All Plugins

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/guide/use.md

Illustrates using the 'better-scroll' package which includes all plugins. This approach is convenient but results in a larger bundle size, so loading plugins individually is recommended for optimization. The usage pattern is similar to version 1.0.

```js
import BScroll from 'better-scroll'

let bs = new BScroll('.wrapper', {
  // ...
  pullUpLoad: true,
  wheel: true,
  scrollbar: true,
  // and so on
})
```

--------------------------------

### Install BetterScroll Core via NPM/Yarn

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/guide/how-to-install.md

Installs the core BetterScroll package using npm or yarn. This is the primary method for adding BetterScroll to modern JavaScript projects.

```bash
npm install @better-scroll/core --save

// or

yarn add @better-scroll/core
```

--------------------------------

### Initialize BScroll with Wheel Options

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/wheel.md

Initialize a new BScroll instance, enabling the wheel plugin by setting the 'wheel' option to true or providing a configuration object.

```javascript
let bs = new BScroll('.bs-wrapper', {
  wheel: true // wheel options 为 true
})
```

--------------------------------

### Install nested-scroll Plugin

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/nested-scroll.md

Installs the nested-scroll plugin for BetterScroll using either npm or yarn package managers.

```bash
npm install @better-scroll/nested-scroll --save

// or

yarn add @better-scroll/nested-scroll
```

--------------------------------

### BetterScroll Initialization and Basic Usage

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/plugins/slide.md

Demonstrates how to import BetterScroll, use plugins like Slide, initialize a new instance with options, and call basic methods like next() and prev().

```js
import BScroll from '@better-scroll/core'
import Slide from '@better-scroll/slide'

BScroll.use(Slide)

const bs = new BScroll('.bs-wrapper', {
  slide: true
})

bs.next()
bs.prev()
bs.getCurrentPage()
```

--------------------------------

### Install nested-scroll Plugin

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/plugins/nested-scroll.md

Installs the nested-scroll plugin for BetterScroll using either npm or yarn package managers.

```bash
npm install @better-scroll/nested-scroll --save

// or

yarn add @better-scroll/nested-scroll
```

--------------------------------

### Vue Component Example (Template)

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/pullup.md

Vue template structure for the pullup component example.

```vue
<template>
  <div class="bs-wrapper">
    <ul class="list">
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
```

--------------------------------

### Instance Methods Usage

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/pullup.md

Shows how to import and use instance methods like `finishPullUp`, `openPullUp`, and `closePullUp` on a BetterScroll instance.

```javascript
import BScroll from '@better-scroll/core'
import PullUp from '@better-scroll/pull-up'

BScroll.use(PullUp)

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

bs.finishPullUp()
bs.openPullUp({})
bs.closePullUp()
```

--------------------------------

### Install observe-dom Plugin

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/plugins/observe-dom.md

Install the observe-dom plugin for better-scroll using npm or yarn package managers.

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

```bash
yarn add @better-scroll/observe-dom
```

--------------------------------

### Initialize BetterScroll with Infinity Plugin

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/infinity.md

Demonstrates how to import and register the infinity plugin with BetterScroll using BScroll.use(). It then shows how to instantiate BetterScroll with the necessary 'infinity' configuration options.

```javascript
import BScroll from '@better-scroll/core'
import InfinityScroll from '@better-scroll/infinity'

BScroll.use(InfinityScroll)
```

```typescript
new BScroll('.bs-wrapper', {
  scrollY: true,
  infinity: {
    fetch(count) {
      // Get data greater than count. This function is asynchronous and must return a Promise.
      // Case 1: resolve(Array<data>) to provide data for rendering.
      // Case 2: resolve(false) to stop infinite scrolling.
    },
    render(item, div?: HTMLElement) {
      // item is the data provided by fetch.
      // div is a recycled DOM element, which may not exist.
      // If div does not exist, create a new HTMLElement.
      // Must return an HTMLElement.
    },
    createTombstone() {
      // Must return a tombstone DOM node.
    }
  }
})
```

--------------------------------

### Initialize BetterScroll with Pull-up

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/pull-up/README.md

Demonstrates how to import and use the PullUp plugin with BetterScroll. It requires importing both BScroll and the PullUp plugin, registering the plugin with BScroll, and then initializing BScroll with the `pullUpLoad: true` option.

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

const bs = new BScroll('.wrapper', {
  pullUpLoad: true
})
```

--------------------------------

### Initialize BetterScroll with Pulldown (javascript)

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/pulldown.md

Demonstrates how to import and initialize the BetterScroll pulldown plugin using the static `BScroll.use()` method. After initialization, BetterScroll instances can be configured with pulldown options.

```javascript
import BScroll from '@better-scroll/core'
import PullDown from '@better-scroll/pull-down'

BScroll.use(PullDown)

new BScroll('.bs-wrapper', {
  pullDownRefresh: true
})
```

--------------------------------

### Install Pullup Plugin

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/pullup.md

Install the pullup plugin for BetterScroll using either npm or yarn package managers.

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

// or

yarn add @better-scroll/pull-up
```

--------------------------------

### Accessing Wheel Instance Methods

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/plugins/wheel.md

Provides an example of how to call instance methods provided by the Wheel plugin, such as getSelectedIndex() and wheelTo(), after the plugin has been registered and a BScroll instance is created.

```js
import BScroll from '@better-scroll/core'
import Wheel from '@better-scroll/wheel'

BScroll.use(Wheel)

const bs = new BScroll('.bs-wrapper', {
  wheel: true
})

bs.getSelectedIndex()
bs.wheelTo(1, 300)
```

--------------------------------

### Install BetterScroll Pullup Plugin

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/plugins/pullup.md

Installs the BetterScroll pullup plugin using either npm or yarn package managers.

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

// or

yarn add @better-scroll/pull-up
```

--------------------------------

### Initialize BetterScroll (Core)

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/README_zh-CN.md

Demonstrates importing the core BetterScroll module and initializing it with a DOM element and basic options.

```javascript
import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {})
```

--------------------------------

### Vue Component Example (Style)

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/zh-CN/plugins/pullup.md

Vue style for the pullup component example, defining the wrapper and list appearance.

```css
<style>
.bs-wrapper {
  height: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
}
.list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.list li {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
</style>
```

--------------------------------

### Import BetterScroll Core (ES Modules)

Source: https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/vuepress-docs/docs/en-US/guide/how-to-install.md

Demonstrates importing the BetterScroll core module using ES module syntax, commonly used with bundlers like Webpack or Vite.

```js
import BScroll from '@better-scroll/core'
```