GitHub - chinanf-boy/vue-scrollto-zh: 🇨🇳翻译: 滚动元素从未如此简单! ❤️ 校对 ✅ (original) (raw)
「 滚动元素从未如此简单! 」
校对 ✅
| 翻译的原文 | 与日期 | 最新更新 | 更多 |
|---|---|---|---|
| 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完成动作曲线函数- 经过充分测试的微小库.
它甚至知道用户何时中断，并且不强制滚动会导致用户体验不良。
目录
安装
这个包在npm上可用.
如果您之前使用过此软件包，请确保使用正确的软件包，因为它已从`vue-scrollTo`重命名为`vue-scrollto`
小写
t
使用npm:
npm install --save vue-scrollto
使用yarn:
直接将其包含在html中:
当它包含在html中时，它会自动调用`Vue.use`,并设置一个你可以使用的'VueScrollTo`变量！
用法
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 })
如果需要自定义滚动选项,可以将对象文字传递给指令:
有关可用选项的更多详细信息，请查看选项部分。
周期函数
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