Api

Common apis

scrollTo(position[,speed ][, easing])

Arguments

  • position (Object)

    • x (string | number)
    • y (string | number)
  • speed (number)

  • easing (string)

Introduction

To scroll to a certain location, you can specify only x ory. easingparameter can be referred to easing

Example

this.$refs['vs'].scrollTo(
  {
    x: '50%'
  },
  500
);

this.$refs['vs'].scrollTo(
  {
    y: 200
  },
  500,
  'easeInQuad'
);
Have a try
ScrollTo
X:
Y:

speed

200

scrollBy(position[,speed ][, easing])

Arguments

  • position (Object)

    • dx (string | number)
    • dy (string | number)
  • speed (number)

  • easing (string)

Introduction

Take the current position as the starting point, scroll for a distance, dx or dy. easingparameter can be referred to easing

Example

this.$refs['vs'].scrollBy(
  {
    dx: '50%'
  },
  500
);

this.$refs['vs'].scrollBy(
  {
    dy: -200
  },
  500,
  'easeInQuad'
);

Have a try

ScrollTo
dX:
dY:

speed

200

getCurrentviewDom()

Introduction

Get the direct subelement of vuescroll as you can see.

Example

this.$refs['vs'].getCurrentviewDom();

Have a try

getCurrentviewDom
1
2
3
4
5
6
7
8
9
10


需要打开控制台查看输出的dmo元素.

scrollIntoView(selector[ , speed])

Arguments

  • selector (string)

  • speed (number)

Introduction

The current window scrolls to a direct child element of vuescroll.

Example

<vue-scroll ref="vs">
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
</vue-scroll>
this.$refs['vs'].scrollIntoView('#d3', 500);

Have a try

scrollIntoView
NO.1
NO.2
NO.3
NO.4
NO.5
NO.6
NO.7
NO.8
NO.9
NO.10


只能作用于vuescroll的直接子元素.

refresh()/refreshAll()

Introduction

Refresh the state of the specified vuescroll or all vuescrolls.

TIP

It can be used when the scroll bar of your vuescroll does not appear.

Usage

<vue-scroll ref="vs" :ops="ops">
  <div v-for="i in 3" :key="i" :id="'d' + i"></div>
</vue-scroll>
<vue-scroll ref="vs1" :ops="ops">
  <div v-for="i in 3" :key="i" :id="'d' + i"></div>
</vue-scroll>
// If you are a modular system, you can use vuescroll directly in the browser.

import vuescroll from 'vuescroll';

this.$refs['vs'].refresh();

vuescroll.refreshAll();

Api for slide mode

goToPage(page[, animate])

Arguments

  • page (Object)

    • x (number)
    • y (number)
  • animate (boolean)

Example

this.$refs['vs'].goToPage(
  {
    x: 1,
    y: 2
  },
  true
);

getCurrentPage()

Introduction

Get the current page number. Work only under slide modeand paging boot.

Example

const pageInfo = this.$refs['vs'].getCurrentPage();
console.log(pageInfo);

triggerRefreshOrLoad(type)

Arguments

  • type ('refresh' | 'load')

Introduction

Directly trigger refresh or load.

Example

this.$refs['vs'].triggerRefreshOrLoad('load');
Last Updated: 3/7/2019, 12:57:57 PM