indicators 2.2.0

Introduciton

The indicators provides the ability to link with another BetterScroll. With this, you can achieve effects such as Parallax Scrolling, Magnifier.

TIP

This is a very powerful and creative plugin.

Install

npm install @better-scroll/indicators --save

// or

yarn add @better-scroll/indicators

Usage

First, install the plugin via the static method BScroll.use()

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

BScroll.use(Indicators)

pass correct indicators options.

new BScroll('.wrapper', {
  indicators: {
    // For details, please refer to the demo below
    relationElement: someHTMLElement
  }
})

Demos

• Magnifier

  <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>

• Parallax Scrolling

  <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 options

relationElement

• Type: HTMLElement

The container element associated with another BetterScroll, just like the above demo, div.scroll-indicator is releationElement. releationElement must be passed in by the user and has child elements.

relationElementHandleElementIndex

• Type: number
• Default: 0

Specify the child element of releationElement as the manipulated element. For details, please refer to the above demo.

ratio

• Type: number | Ratio | undefined
• Default: undefined

type Ratio = {
  // Specify the ratio of the scroll distance of x
  x: number
  // Specify the ratio of the scroll distance of y
  y: number
}

Specify the ratio of releationElement to the scrolling distance of BetterScroll. Usually,the plugin will automatically calculate the scroll ratio of the two, but you can also manually specify the ratio to achieve the effect of Parallax Scrolling. For details, please refer to the demo above.

interactive

• Type: boolean | undefined
• Default: undefined

Decide whether the relationElementHandleElementIndex of relationElement can interact. When it is set to false, it will not respond to touch / mouse events.