Api

通用 Api

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

参数

  • position (Object)

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

  • easing (string)

介绍

滚动到某一个位置,可以只指定xyeasing参数可以参考easing

例子

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

this.$refs['vs'].scrollTo(
  {
    y: 200
  },
  500,
  'easeInQuad'
);

尝试一下

ScrollTo
X:
Y:

速度

200

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

参数

  • position (Object)

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

  • easing (string)

介绍

以当前位置为起点,滚动一段距离,dxdyeasing参数可以参考easing

例子

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

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

尝试一下

ScrollTo
dX:
dY:

速度

200

getCurrentviewDom()

介绍

获取你能看到的 vuescroll 的直接子元素.

例子

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

H 尝试一下

getCurrentviewDom
1
2
3
4
5
6
7
8
9
10


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

scrollIntoView(selector[ , speed])

参数

  • selector (string)

  • speed (number)

介绍

当前窗口滚动至vuescroll的一个直接子元素

例子

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

H 尝试一下

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


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

refresh()/refreshAll()

介绍

刷新制定 vuescroll 的状态或者所有 vuescroll 的状态。

提示

在你的 vuescroll 的滚动条不出现的时候可以用到。

用法

<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>
// 如果你是模块系统的话,如果在浏览器直接使用vuescroll即可。
import vuescroll from 'vuescroll';

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

vuescroll.refreshAll();

Slide 模式的 Api

goToPage(page[, animate])

参数

  • page (Object)

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

例子

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

getCurrentPage()

介绍

获取当前的页码。只在slide模式paging 启动下工作。

例子

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

triggerRefreshOrLoad(type)

参数

  • type ('refresh' | 'load')

介绍

直接触发刷新或者加载

用法

this.$refs['vs'].triggerRefreshOrLoad('load');
上次更新: 2019-3-7 12:57:57