BetterScroll 2.0

# nested-scroll

# 介绍

协调嵌套的 BetterScroll 滚动行为。

警告

v2.1.0 支持多层嵌套的 BetterScroll，并且功能更强大，性能更好。在这之前，只支持双层嵌套，请尽快升级至 2.1.0 版本。

提示

v2.1.0 完美解决多层嵌套 BetterScroll 的 click 事件多次派发的问题。

# 安装

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。

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

  // v2.1.0
  // parent bs
  new BScroll('.outerWrapper', {
    nestedScroll: {
      groupId: 'dummy-divide' // string or number
    }
  })
  // child bs
  new BScroll('.innerWrapper', {
    nestedScroll: {
      groupId: 'dummy-divide'
    }
  })

具有相同 groupId 的 BetterScroll 实例（bs）共享同一个 NestedScroll 实例（ns），ns 会协调每个 bs 滚动行为，一旦某个 bs 销毁的时候，ns 都会失去对它的掌控，例如：

// parent bs
const bs1 = new BScroll('.outerWrapper', {
  nestedScroll: {
    groupId: 'shared' // string or number
  }
})
// child bs
const bs2 = new BScroll('.innerWrapper', {
  nestedScroll: {
    groupId: 'shared'
  }
})

console.log(bs1.plugins.nestedScroll === bs2.plugins.nestedScroll) // true

bs2.destroy() // nestedScroll 不再约束 bs2，不再协调 bs1 与 bs2 的滚动行为

# 示例

  • 竖向双层嵌套 2.1.0

    <template>
  <div class="container">
    <div ref="outerScroll" class="outer-wrapper">
      <div class="outer-content">
        <ul>
          <li class="outer-list-item" @click="handleOuterClick" v-for="(item, index) in outerOpenData" :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 innerData" @click="handleInnerClick" :key="index">{{item}}</li>
          </ul>
        </div>
        <ul>
          <li class="outer-list-item" @click="handleOuterClick" v-for="(item, index) in outerCloseData" :key="index">{{item}}</li>
        </ul>
      </div>

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

  • 竖向三层嵌套 2.1.0

    <template>
  <div class="container">
    <div ref="outerScroll" class="outer-wrapper">
      <div class="outer-content">
        <ul>
          <li class="outer-list-item" @click="handleOuterClick" v-for="(item, index) in outerOpenData" :key="index">{{item}}</li>
        </ul>
        <div ref="middleScroll"  class="middle-wrapper">
          <div class="middle-content">
            <ul>
              <li class="middle-list-item" @click="handleMiddleClick" v-for="(item, index) in middleOpenData" :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 innerData" @click="handleInnerClick" :key="index">{{item}}</li>
              </ul>
            </div>
            <ul>
              <li class="middle-list-item" @click="handleMiddleClick" v-for="(item, index) in middleCloseData" :key="index + 100">{{item}}</li>
            </ul>
          </div>
        </div>
        <ul>
          <li class="outer-list-item" @click="handleOuterClick" v-for="(item, index) in outerCloseData" :key="index + 100">{{item}}</li>
        </ul>
      </div>

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

  • 横向双层嵌套 2.1.0

    • 横向竖向双层嵌套 2.1.0

# 实例方法 2.1.0

提示

以下方法皆已代理至 BetterScroll 实例，例如：

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

BScroll.use(NestedScroll)

const bs1 = new BScroll('.parent-wrapper', {
  nestedScroll: {
    groupId: 'dummy'
  }
})

const bs2 = new BScroll('.child-wrapper', {
  nestedScroll: {
    groupId: 'dummy'
  }
})

// 销毁 nestedScroll，bs1 与 bs2 共享同一个 nestedScroll 实例，因为他们的 groupId 相同
bs1.purgeNestedScroll() // 与 bs2.purgeNestedScroll() 的效果一样

# purgeNestedScroll()

  • 介绍：销毁管控自己的 nestedScroll

注意

不同的 groupId 会生成不同的 nestedScroll，相同的 groupId 会共享同一份 nestedScroll，因此你应该在合适的时机（比如组件销毁的时候）调用 purgeNestedScroll 来清理内存。或者你也可以调用 BetterScroll 的 destroy 方法把自身从 nestedScroll 移除，例如：

const bs1 = new BScroll('.parent-wrapper', {
  nestedScroll: {
    groupId: 'dummy'
  }
})

const bs2 = new BScroll('.child-wrapper', {
  nestedScroll: {
    groupId: 'dummy'
  }
})

bs1.destroy() // nestedScroll 不再管控 bs1
bs2.destroy() // nestedScroll 不再管控 bs2

# 静态方法 2.1.0

# getAllNestedScrolls()

  • 介绍：获取当前所有的 nestedScroll 实例

  • 返回：nestedScroll 实例组成的数组

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

const nestedScrolls: NestedScroll[] = NestedScroll.getAllNestedScrolls()

# purgeAllNestedScrolls()

  • 介绍：销毁当前所有的 nestedScroll 实例
import NestedScroll from '@better-scroll/nested-scroll'

// 不再约束任何 BetterScroll 实例
NestedScroll.purgeAllNestedScrolls()

← infinity →