indicators 2.2.0

介绍

indicators 赋予了联动另外一个 BetterScroll 的能力，借助于此，可以实现视觉滚动差、放大镜等效果。

提示

这是一个非常强大并且具有创造力的插件，限制你的只有你的想象力！

安装

npm install @better-scroll/indicators --save

// or

yarn add @better-scroll/indicators

使用

首先引入 indicators 插件，并通过静态方法 BScroll.use() 注册插件

import BScroll from '@better-scroll/core'
import Indicators from '@better-scroll/indicators'

BScroll.use(Indicators)

接着在 options 传入正确的配置。

new BScroll('.wrapper', {
  indicators: {
    // 详情可以参考下面的 demo
    relationElement: "联动的元素 DOM"
  }
})

示例

• 放大镜效果

  <template>
    <div class="minimap-container">
      <div class="scroll-wrapper" ref="wrapper">
        <!-- maxWidth is used to overwrite vuepress default theme style -->
        <!-- because this component is used in vuepress markdown as a demo -->
        <img :style="{ maxWidth: 'none' }" class="scroll-content" :src="dinnerLink" />
      </div>
      <div class="scroll-indicator" ref="indicatorWrapper">
        <img class="scroll-indicator-bg" :src="dinnerLink">
        <div class="scroll-indicator-handle"></div>
      </div>
    </div>
  </template>

  <script>
  import BScroll from '@better-scroll/core'
  import Indicators from '@better-scroll/indicators'
  import dinnerLink from './dinner.jpg'
  
  BScroll.use(Indicators)
  
  export default {
    created () {
      this.dinnerLink = dinnerLink
    },
    mounted () {
      this.initScroll()
    },
    methods: {
      initScroll () {
        this.scroll = new BScroll(this.$refs.wrapper, {
          startX: -50,
          startY: -50,
          freeScroll: true,
          bounce: false,
          indicators: [
            {
              relationElement: this.$refs.indicatorWrapper,
              // choose div.scroll-indicator-handle as indicatorHandle
              relationElementHandleElementIndex: 1
            }
          ]
        })
      }
    }
  }
  </script>

  <style lang="stylus" scoped>
  .minimap-container
    .scroll-wrapper
      width 320px
      height 180px
      overflow hidden
    .scroll-content
      width 1920px
      height 1080px
    .scroll-indicator
      margin-top 15px
      width 320px
      height 180px
      position relative
    .scroll-indicator-bg
      position absolute
      width 100%
      height 100%
    .scroll-indicator-handle
      position absolute
      border 1px solid white
      box-shadow 0 0 5px white
      width 64px
      height 36px
      z-index 1
      background-color rgba(255, 255, 255, 0.3)
  </style>

• 视觉滚动差

  <template>
    <div class="parallax-scroll-container">
      <div class="parallax-scroll-box">
        <div class="scroll-wrapper" ref="wrapper">
          <div class="scroll-content" />
        </div>
        <div class="scroll-indicator stars1" ref="indicator1">
          <div class="star1-bg"></div>
        </div>
        <div class="scroll-indicator stars2" ref="indicator2">
          <div class="star2-bg"></div>
        </div>
      </div>
    </div>
  </template>

  <script>
  import BScroll from '@better-scroll/core'
  import Indicators from '@better-scroll/indicators'
  
  BScroll.use(Indicators)
  
  export default {
    mounted () {
      this.initScroll()
    },
    methods: {
      initScroll () {
        this.scroll = new BScroll(this.$refs.wrapper, {
          freeScroll: true,
          bounce: false,
          indicators: [
            {
              relationElement: this.$refs.indicator1,
              interactive: false,
              ratio: 0.4
            },
            {
              relationElement: this.$refs.indicator2,
              interactive: false,
              ratio: 0.2
            }
          ]
        })
      }
    }
  }
  </script>

  <style lang="stylus" scoped>
  .parallax-scroll-container
    height 100%
    .parallax-scroll-box
      position relative
      width 100%
      height 100%
      box-sizing border-box
      border 1px solid #fe0
    .scroll-wrapper
      position absolute
      z-index 3
      top 0
      right 0
      bottom 0
      left 0
      overflow hidden
    .scroll-content
      width 100%
      height 4000px
      background: url('./galaxies1.png')
    .scroll-indicator
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      overflow hidden
      &.stars1
        z-index 2
      &.stars2
        z-index 1
    .star1-bg
      height 3000px
      background: url('./galaxies2.png')
    .star2-bg
      height 2000px
      background: url('./stars.jpg')
  </style>

indicators 选项对象

relationElement

• 类型：HTMLElement

与另外一个 BetterScroll 关联的容器元素，正如上面的 demo， div.scroll-indicator 就是 releationElement。releationElement 必须由用户传入，并且拥有子元素。

relationElementHandleElementIndex

• 类型：number
• 默认值：0

指定 releationElement 的第几个子元素作为操控的元素，详细可以参考以上的 demo。

ratio

• 类型：number | Ratio | undefined
• 默认值：undefined

type Ratio = {
  x: number // 指定 x 方向滚动距离的比例
  y: number // 指定 y 方向滚动距离的比例饿
}

指定 releationElement 与 BetterScroll 滚动距离的比例。一般情况下，插件内部会自动计算两者的滚动比例，但是你也可以手动指定比例，来实现 视觉滚动差 的效果。详细可以参考以上的 Demo。

interactive

• 类型：boolean | undefined
• 默认值：undefined

决定 relationElement 的第 relationElementHandleElementIndex 个子元素是否可以交互，当它置成 false 的时候，则不响应 touch / mouse 事件。