From df23405bdee225c37efde3bcb634db8b368919d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= Date: Wed, 17 Oct 2018 17:39:25 +0800 Subject: [PATCH] feature: add pagination component (#1213) --- src/components/Pagination/index.vue | 99 +++++++++++++++++++++++++++++ src/utils/index.js | 11 ---- src/utils/scrollTo.js | 50 +++++++++++++++ src/views/example/list.vue | 14 +--- src/views/table/complexTable.vue | 22 ++----- 5 files changed, 158 insertions(+), 38 deletions(-) create mode 100644 src/components/Pagination/index.vue create mode 100644 src/utils/scrollTo.js diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue new file mode 100644 index 00000000..9698232b --- /dev/null +++ b/src/components/Pagination/index.vue @@ -0,0 +1,99 @@ + + + + + diff --git a/src/utils/index.js b/src/utils/index.js index 3af8b29b..0445827b 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -164,17 +164,6 @@ export function objectMerge(target, source) { return target } -export function scrollTo(element, to, duration) { - if (duration <= 0) return - const difference = to - element.scrollTop - const perTick = (difference / duration) * 10 - setTimeout(() => { - element.scrollTop = element.scrollTop + perTick - if (element.scrollTop === to) return - scrollTo(element, to, duration - 10) - }, 10) -} - export function toggleClass(element, className) { if (!element || !className) { return diff --git a/src/utils/scrollTo.js b/src/utils/scrollTo.js new file mode 100644 index 00000000..8affede6 --- /dev/null +++ b/src/utils/scrollTo.js @@ -0,0 +1,50 @@ +Math.easeInOutQuad = function(t, b, c, d) { + t /= d / 2 + if (t < 1) { + return c / 2 * t * t + b + } + t-- + return -c / 2 * (t * (t - 2) - 1) + b +} + +// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts +var requestAnimFrame = (function() { + return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) } +})() + +// because it's so fucking difficult to detect the scrolling element, just move them all +function move(amount) { + document.documentElement.scrollTop = amount + document.body.parentNode.scrollTop = amount + document.body.scrollTop = amount +} + +function position() { + return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop +} + +export function scrollTo(to, duration, callback) { + const start = position() + const change = to - start + const increment = 20 + let currentTime = 0 + duration = (typeof (duration) === 'undefined') ? 500 : duration + var animateScroll = function() { + // increment the time + currentTime += increment + // find the value with the quadratic in-out easing function + var val = Math.easeInOutQuad(currentTime, start, change, duration) + // move the document.body + move(val) + // do the animation unless its over + if (currentTime < duration) { + requestAnimFrame(animateScroll) + } else { + if (callback && typeof (callback) === 'function') { + // the animation is done so lets callback + callback() + } + } + } + animateScroll() +} diff --git a/src/views/example/list.vue b/src/views/example/list.vue index 4ab61d38..85ae4e43 100644 --- a/src/views/example/list.vue +++ b/src/views/example/list.vue @@ -50,26 +50,18 @@ -
- -
+