Awesome

vue-scrollto

「 滚动元素从未如此简单! 」

中文 | english

校对 ✅

翻译的原文	与日期	最新更新	更多
commit	⏰ 2018 9.13		中文翻译

贡献

欢迎 👏 勘误/校对/更新贡献 😊 具体贡献请看

生活

If help, buy me coffee —— 营养跟不上了，给我来瓶营养快线吧! 💰

vue-scrollto

滚动元素从未如此简单!

DEMO

这是为了vue 2.x

对于vue 1.x请使用vue-scrollTo@1.0.1(注意大写字母T),但也请记住旧版本依赖于jquery.

在引擎盖下

vue-scrollto使用window.requestAnimationFrame执行动画,从而提供最佳性能.

使用bezier-easing完成动作曲线函数- 经过充分测试的微小库.

目录

• 安装
• 用法
  • 作为vue指令
  • 周期函数
• Options
  • el / element
  • container
  • duration
  • easing
• 缓动函数
  • offset
  • force
  • cancelable
  • onStart
  • onDone
  • onCancel
  • x
  • y
• 同时滚动
• 执照

安装

这个包在npm上可用.

小写t

使用npm:

npm install --save vue-scrollto

使用yarn:

yarn add vue-scrollto

直接将其包含在html中:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script>

用法

vue-scrollto既可以用作vue指令,也可以用你的javascript编写.

作为vue指令

var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');

Vue.use(VueScrollTo)

// 你可以传递默认参数
Vue.use(VueScrollTo, {
     container: "body",
     duration: 500,
     easing: "ease",
     offset: 0,
     force: true,
     cancelable: true,
     onStart: false,
     onDone: false,
     onCancel: false,
     x: false,
     y: true
 })

如果您使用的是浏览器版本(直接在页面上包含脚本),则可以使用默认值设置:

VueScrollTo.setDefaults({
    container: "body",
    duration: 500,
    easing: "ease",
    offset: 0,
    force: true,
    cancelable: true,
    onStart: false,
    onDone: false,
    onCancel: false,
    x: false,
    y: true
})

<a href="#" v-scroll-to="'#element'">滚动 到 #element</a>

<div id="element">
    Hi. I'm #element.
</div>

如果需要自定义滚动选项,可以将对象文字传递给指令:

<a href="#" v-scroll-to="{
     el: '#element',
     container: '#container',
     duration: 500,
     easing: 'linear',
     offset: -200,
     force: true,
     cancelable: true,
     onStart: onStart,
     onDone: onDone,
     onCancel: onCancel,
     x: false,
     y: true
 }">
    Scroll to #element
</a>

周期函数

var VueScrollTo = require('vue-scrollto');

var options = {
    container: '#container',
    easing: 'ease-in',
    offset: -60,
    force: true,
    cancelable: true,
    onStart: function(element) {
      // scrolling 开始
    },
    onDone: function(element) {
      // scrolling 结束
    },
    onCancel: function() {
      // scrolling 被取消啊
    },
    x: false,
    y: true
}

var cancelScroll = VueScrollTo.scrollTo(element, duration, options)

// 或者您可以在组件内部使用
cancelScroll = this.$scrollTo(element, duration, options)

// 要取消滚动，您可以调用返回的函数
cancelScroll()

Options

el / element

要滚动到的元素.

container

需要滚动的容器.

默认: body

duration

滚动动画的持续时间(以毫秒为单位).

默认: 500

easing

动画时使用的曲线函数.阅读更多内容缓动函数细节.

默认: ease

offset

滚动时应使用的偏移量.此选项接受回调函数 v2.8.0打上.

默认: 0

force

指示是否应执行滚动,即使滚动目标已在视图中.

默认: true

cancelable

指示用户是否可以取消滚动.

默认: true

onStart

滚动开始时,应调用的回调函数.接收目标元素作为参数.

默认: noop

onDone

滚动结束时,应调用的回调函数.接收目标元素作为参数.

默认: noop

onCancel

滚动时已被用户中止(用户滚动,单击等),应调用的回调函数. 接收中止事件和目标元素作为参数.

默认: noop

x

我们是否想要滚动x轴

默认: false

y

我们是否想要滚动y轴

默认: true

缓动函数使用bezier-easing计算,所以你可以将自己的具有4个值的数组的形式的值, 传递给options.easing,,或者您可以通过其特定的字符串名称, 来使用任何的默认缓动(ease,linear,ease-in,ease-out,ease-in-out).

vue-scrollto使用以下值作为默认缓动:

let easings = {
    'ease': [0.25, 0.1, 0.25, 1.0],
    'linear': [0.00, 0.0, 1.00, 1.0],
    'ease-in': [0.42, 0.0, 1.00, 1.0],
    'ease-out': [0.00, 0.0, 0.58, 1.0],
    'ease-in-out': [0.42, 0.0, 0.58, 1.0]
}

同时滚动

如果需要同时滚动多个容器,可以直接导入scroller工厂,并创建多个实例.(由于性能原因,使用默认scrollTo方法一次只允许一个滚动操作.)

import {scroller} from 'vue-scrollto/src/scrollTo'
const firstScrollTo = scroller()
const secondScrollTo = scroller()
firstScrollTo('#el1')
secondScrollTo('#el2')

执照

MIT