# 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

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. You had better call it in setTimeout after mutating the data.

# 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();

# getScrollProcess

# Introduction

Get the current scroll process under a range of [0, 1].

# Usage

<vue-scroll ref="vs" :ops="ops">
  <div v-for="i in 3" :key="i" :id="'d' + i"></div>
</vue-scroll>
const { v, h } = this.$refs["vs"].getScrollProcess();

console.loo(v, h);

# getPosition

# Introduction

Get the scrollTop.scrollLeft of current scrolling.

# Usage

<vue-scroll ref="vs" :ops="ops">
  <div v-for="i in 3" :key="i" :id="'d' + i"></div>
</vue-scroll>
const { scrollTop, scrollLeft } = this.$refs["vs"].getPosition();

console.loo(scrollTop, scrollLeft);

# Api for native mode

# stop()/pause()/continue()

# Introduction

Stop / pause / continue scrolling at once.

# Example

this.$refs["vs"].stop();
this.$refs["vs"].pause();
this.$refs["vs"].continue();

# Have a try

stop/pause/continue
X:
Y:

speed: 1000

current: {x:0, y:0}


# 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/4/2020, 12:38:17 PM