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

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: 9/6/2019, 12:08:45 PM