movable

Introduction

Add move functionality for BetterScroll.

Install

npm install @better-scroll/movable --save

// or

yarn add @better-scroll/movable

Basic Usage

import movable, then call BScroll.use().

  import BScroll from '@better-scroll/core'
  import Movable from '@better-scroll/movable'

  BScroll.use(Movable)

pass in the correct configuration in options, for example:

  new BScroll('.bs-wrapper', {
    bindToTarget: true,
    scrollX: true,
    scrollY: true,
    freeScroll: true,
    bounce: true
    movable: true // for movable plugin
  })

The following is related to movable plugin and BetterScroll configuration:

• movable(for plugin)

  Enable zoom functionality, set it true.

• bindToTarget

  Must be set to true to actively bind the touch event to the element to be moved, because BetterScroll binds the touch event to the wrapper element by default.

• freeScroll

  Record the offset of x and y direction when finger moved, set it true. In addtional, scrollX and scrollY are also need to be true.

• scrollX

  Enable the scrolling ability in the x direction and set it to true.

• scrollY

  Enable the scrolling ability in the y direction and set it to true.

• bounce

  Specifies to turn on boundary rebound.

  • Examples

    {
      bounce: true // Enable all directions,
      bounce: {
        left: true, // Enable the left
        right: true, // Enable the right
        top: false,
        bottom: false
      }
    }
  

Demo

• Only one content

  Usually, there is only one content.

  <template>
    <div class="movable-container">
      <div class="scroll-wrapper" ref="scroll">
        <div class="scroll-content">
          <div class="scroll-item" v-for="(item, index) in emojis" :key="index">{{item}}</div>
        </div>
      </div>
    </div>
  </template>

  <script type="text/ecmascript-6">
    import BScroll from '@better-scroll/core'
    import Movable from '@better-scroll/movable'
  
    BScroll.use(Movable)
  
    export default {
      data () {
        return {
          emojis: [
            '😀 😁 😂 🤣 😃',
            '😄 😅 😆 😉 😊',
            '😫 😴 😌 😛 😜',
            '👆🏻 😒 😓 😔 👇🏻'
          ]
        }
      },
      mounted() {
        this.init()
      },
      beforeDestroy() {
        this.bs.destroy()
      },
      methods: {
        init() {
          this.bs = new BScroll(this.$refs.scroll, {
            bindToTarget: true,
            scrollX: true,
            scrollY: true,
            freeScroll: true,
            movable: true,
            startX: 20,
            startY: 20
          })
        }
      }
    }
  </script>

  <style lang="stylus" rel="stylesheet/stylus" scoped>
  
  .movable-container
    .scroll-wrapper
      height 400px
      overflow hidden
      box-shadow 0 0 3px rgba(0, 0, 0, .3)
      .scroll-content
        width 220px
      .scroll-item
        height 50px
        line-height 50px
        font-size 24px
        font-weight bold
        border-bottom 1px solid #eee
        text-align center
        &:nth-child(2n)
          background-color #f3f5f7
        &:nth-child(2n+1)
          background-color #42b983
  </style>

• Multi content

  However, in some scenarios, there may be multiple content.

  <template>
    <div class="movable-multi-content-container">
      <div class="scroll-wrapper" ref="scroll">
        <div class="scroll-content content1">
          <figure>
            <figcaption>Cold Oasis</figcaption>
            <img class="picture" :src="picture1"
           alt="Cold Oasis">
          </figure>
        </div>
        <div class="scroll-content content2">
          <figure>
            <figcaption>Warm Oasis</figcaption>
            <img class="picture" :src="picture2"
           alt="Warm Oasis">
          </figure>
        </div>
      </div>
      <button class="btn" @click="handleClick">Put The Warm at center position</button>
    </div>
  </template>

  <script type="text/ecmascript-6">
    import BScroll from '@better-scroll/core'
    import Movable from '@better-scroll/movable'
    import picture1 from './oasis_one.png'
    import picture2 from './oasis_two.png'
  
    BScroll.use(Movable)
  
    export default {
      created() {
        this.picture1 = picture1
        this.picture2 = picture2
      },
      mounted() {
        this.init()
      },
      beforeDestroy() {
        this.bs1.destroy()
        this.bs2.destroy()
      },
      methods: {
        init() {
          this.bs1 = new BScroll(this.$refs.scroll, {
            bindToTarget: true,
            scrollX: true,
            scrollY: true,
            freeScroll: true,
            movable: true,
            startX: 10,
            startY: 10
          })
          this.bs2 = new BScroll(this.$refs.scroll, {
            // use wrapper.children[1] as content
            specifiedIndexAsContent: 1,
            bindToTarget: true,
            scrollX: true,
            scrollY: true,
            freeScroll: true,
            movable: true,
            startX: 0,
            startY: 170
          })
        },
        handleClick() {
          this.bs2.putAt('center', 'center')
        }
      }
    }
  </script>

  <style lang="stylus" rel="stylesheet/stylus" scoped>
  
  .movable-multi-content-container
  
    .scroll-wrapper
      height 400px
      overflow hidden
      position relative
      box-shadow 0 0 3px rgba(0, 0, 0, .3)
      .scroll-content
        position absolute
        top 0
        left 0
        width 200px
        figure
          margin 0
        figcaption
          font-weight bold
          margin-bottom 5px
          text-align center
          color #ea4c89
        .picture
          width 200px
          height 150px
          border-radius 10px
      .scroll-item
        height 50px
        line-height 50px
        font-size 24px
        font-weight bold
        border-bottom 1px solid #eee
        text-align center
        &:nth-child(2n)
          background-color #f3f5f7
        &:nth-child(2n+1)
          background-color #42b983
  
    .btn
      margin 40px auto
      padding 10px
      color #fff
      border-radius 4px
      font-size 20px
      background-color #666
  </style>

Advanced Usage

With zoom plugin, increase the zoom capability.

  import BScroll from '@better-scroll/core'
  import Movable from '@better-scroll/movable'
  import Zoom from '@better-scroll/zoom'
  new BScroll('.bs-wrapper', {
    bindToTarget: true,
    scrollX: true,
    scrollY: true,
    freeScroll: true,
    bounce: true
    movable: true // for movable plugin
    zoom: { // for zoom plugin
      start: 1,
      min: 1,
      max: 3
    }
  })

Demo

WARNING

pc is not allowed, scan the qrcode.

• One Content

  <template>
    <div class="core-container">
      <div class="scroll-wrapper" ref="scroll">
        <div class="scroll-content">
          <div class="scroll-item" v-for="(item, index) in emojis" :key="index">{{item}}</div>
        </div>
      </div>
    </div>
  </template>

  <script type="text/ecmascript-6">
    import BScroll from '@better-scroll/core'
    import Movable from '@better-scroll/movable'
    import Zoom from '@better-scroll/zoom'
  
    BScroll.use(Movable)
    BScroll.use(Zoom)
  
    export default {
      data () {
        return {
          emojis: [
            '😀 😁 😂 🤣 😃',
            '😄 😅 😆 😉 😊',
            '😫 😴 😌 😛 😜',
            '👆🏻 😒 😓 😔 👇🏻'
          ]
        }
      },
      mounted() {
        this.init()
      },
      beforeDestroy() {
        this.bs.destroy()
      },
      methods: {
        init() {
          this.bs = new BScroll(this.$refs.scroll, {
            bindToTarget: true,
            scrollX: true,
            scrollY: true,
            freeScroll: true,
            movable: true,
            zoom: {
              start: 1,
              min: 0.5,
              max: 3
            }
          })
        }
      }
    }
  </script>

  <style lang="stylus" rel="stylesheet/stylus" scoped>
  
  .core-container
    .scroll-wrapper
      height 400px
      overflow hidden
      box-shadow 0 0 3px rgba(0, 0, 0, .3)
      .scroll-content
        width 220px
      .scroll-item
        height 50px
        line-height 50px
        font-size 24px
        font-weight bold
        border-bottom 1px solid #eee
        text-align center
        &:nth-child(2n)
          background-color #f3f5f7
        &:nth-child(2n+1)
          background-color #42b983
  </style>

• Multi Content

  <template>
    <div class="movable-multi-content-scale-container">
      <div class="scroll-wrapper" ref="scroll">
        <div class="scroll-content content1">
          <figure>
            <figcaption>Swordsman</figcaption>
            <img class="picture" :src="swordsmanLink"
           alt="ftstr">
          </figure>
        </div>
        <div class="scroll-content content2">
          <figure>
            <figcaption>The Witch</figcaption>
            <img class="picture" :src="witchLink"
           alt="qos_crop">
          </figure>
        </div>
      </div>
      <button class="btn" @click="handleClick">Put The Witch at right-bottom corner</button>
    </div>
  </template>

  <script type="text/ecmascript-6">
    import BScroll from '@better-scroll/core'
    import Movable from '@better-scroll/movable'
    import Zoom from '@better-scroll/zoom'
    import SwordsmanLink from './ftstr.png'
    import WitchLink from './qos_crop.png'
  
    BScroll.use(Movable)
    BScroll.use(Zoom)
  
    export default {
      created() {
        this.swordsmanLink = SwordsmanLink
        this.witchLink = WitchLink
      },
      mounted() {
        this.init()
      },
      beforeDestroy() {
        this.bs1.destroy()
        this.bs2.destroy()
      },
      methods: {
        handleClick() {
          this.bs2.putAt('right', 'bottom', 500)
        },
        init() {
          this.bs1 = new BScroll(this.$refs.scroll, {
            bindToTarget: true,
            scrollX: true,
            scrollY: true,
            freeScroll: true,
            movable: true,
            zoom: {
              start: 1.2,
              min: 0.5,
              max: 3
            }
          })
          this.bs1.putAt('center', 'center', 0)
          this.bs2 = new BScroll(this.$refs.scroll, {
            specifiedIndexAsContent: 1,
            bindToTarget: true,
            scrollX: true,
            scrollY: true,
            freeScroll: true,
            movable: true,
            startY: 150,
            zoom: {
              start: 1,
              min: 0.5,
              max: 3
            }
          })
        }
      }
    }
  </script>

  <style lang="stylus" rel="stylesheet/stylus" scoped>
  
  .movable-multi-content-scale-container
  
    .scroll-wrapper
      height 400px
      overflow hidden
      position relative
      box-shadow 0 0 3px rgba(0, 0, 0, .3)
      .scroll-content
        position absolute
        top 0
        left 0
        width 200px
        figure
          margin 0
        figcaption
          font-weight bold
          margin-bottom 5px
          text-align center
          color #ea4c89
        .picture
          width 200px
          height 150px
          border-radius 10px
      .scroll-item
        height 50px
        line-height 50px
        font-size 24px
        font-weight bold
        border-bottom 1px solid #eee
        text-align center
        &:nth-child(2n)
          background-color #f3f5f7
        &:nth-child(2n+1)
          background-color #42b983
  
    .btn
      margin 40px auto
      padding 10px
      color #fff
      border-radius 4px
      font-size 20px
      background-color #666
  </style>

Instance Methods

putAt(x, y, [time], [easing]) 2.0.4

• Arguments

  • {PositionX} x: x coordinate
    • PositionX: 'number | 'left' | 'right' | 'center'
  • {PositionY} y: y coordinate
    • PositionY: 'number | 'top' | 'bottom' | 'center'
  • {number} [time]<Optional>: Scroll animation duration
  • {EaseItem} [easing]<Optional>: Ease effect configuration, refer to ease.ts (opens new window), the default is bounce effect

  Put the content element in a certain position. x and y can be not only numbers, but also corresponding strings.

• Examples

const bs = new BScroll('.bs-wrapper', {
  bindToTarget: true,
  scrollX: true,
  scrollY: true,
  freeScroll: true,
  movable: true
})

// Placed in the center of the wrapper
bs.putAt('center', 'center', 0)

// Placed in the right-bottom corner of the wrapper, the animation duration is 1s
bs.putAt('right', 'bottom', 1000)