# nested-scroll

# 介绍

协调 BetterScroll 双层嵌套的滚动行为。

WARNING

目前插件只解决双层嵌套问题，比如竖向套竖向、横向套横向。

# 安装

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

// or

yarn add @better-scroll/nested-scroll

# 使用

你需要首先引入 nested-scroll 插件，并通过全局方法 BScroll.use() 使用

  import BScroll from '@better-scroll/core'
  import NestedScroll from '@better-scroll/nested-scroll'

  BScroll.use(NestedScroll)

上面步骤完成后，BScroll 的 options 中配置 nestedScroll。

  // parent bs
  new BScroll('.outerWrapper', {
    nestedScroll: true
  })
  // child bs
  new BScroll('.innerWrapper', {
    nestedScroll: true
  })

# 示例

竖向双层嵌套

<template>
  <div class="container">
    <div ref="outerScroll" class="outer-wrapper">
      <div class="outer-content">
        <ul>
          <li class="outer-list-item" v-for="(item, index) in items1" :key="index">{{item}}</li>
        </ul>
        <div ref="innerScroll" class="inner-wrapper">
          <ul class="inner-content">
            <li class="inner-list-item" v-for="(item, index) in items2" :key="index">{{item}}</li>
          </ul>
        </div>
        <ul>
          <li class="outer-list-item" v-for="(item, index) in items1" :key="index">{{item}}</li>
        </ul>
      </div>

    </div>
  </div>
</template>

横向双层嵌套

<template>
  <div class="container">
      <div ref="outerScroll" class="outer-wrapper">
        <ul class="outer-content">
          <li v-for="(item, idx) in items1" :key="idx" class="list-item">{{ item }}</li>
          <li class="list-item inner-list-item">
            <div
              ref="innerScroll"
              class="inner-wrapper">
              <ul class="inner-content">
                <li v-for="(item, idx) in items2" :key="idx" class="list-item">{{ item }}</li>
              </ul>
            </div>
          </li>
          <li v-for="(item, idx) in items1" :key="idx + 100" class="list-item">{{ item }}</li>
        </ul>
      </div>
  </div>
</template>

← zoom infinity →