Permalink
Browse files

* [html5] support scroll event & offset-accuracy attribute.

  • Loading branch information...
MrRaindrop committed Mar 23, 2017
1 parent 36a71b1 commit f50fba8647c8bb6ac522b1a4569a2a2269da1953
Showing with 43 additions and 1 deletion.
  1. +43 −1 html5/render/vue/mixins/scrollable.js
@@ -1,6 +1,47 @@
-import { getThrottleLazyload } from '../utils'
+import { getThrottleLazyload, throttle } from '../utils'
+
+let throttleScroll
+function getThrottledScroll (context) {
+ if (!throttleScroll) {
+ const wrapper = context.$refs.wrapper
+ const inner = context.$refs.inner
+ let preOffset = (context.scrollDirection === 'horizontal'
+ ? wrapper.scrollLeft
+ : wrapper.scrollTop)
+ || 0
+ throttleScroll = throttle(function (evt) {
+ const offset = context.scrollDirection === 'horizontal'
+ ? wrapper.scrollLeft
+ : wrapper.scrollTop
+ const indent = parseInt(context.offsetAccuracy)
+ function triggerScroll () {
+ const rect = inner.getBoundingClientRect()
+ evt.contentSize = { width: rect.width, height: rect.height }
+ evt.contentOffset = {
+ x: wrapper.scrollLeft,
+ y: wrapper.scrollTop
+ }
+ context.$emit('scroll', evt)
+ }
+ if (indent
+ && !isNaN(indent)
+ && indent > 0
+ && Math.abs(offset - preOffset) >= indent) {
+ triggerScroll()
+ preOffset = offset
+ }
+ else if (!indent || isNaN(indent) || indent <= 0) {
+ triggerScroll()
+ }
+ }, 16, true)
+ }
+ return throttleScroll
+}
export default {
+ props: {
+ offsetAccuracy: [Number, String]
+ },
methods: {
updateLayout () {
const wrapper = this.$refs.wrapper
@@ -13,6 +54,7 @@ export default {
handleScroll (event) {
getThrottleLazyload(25, this.$el, 'scroll')()
+ getThrottledScroll(this)(event)
if (this.reachBottom()) {
this.$emit('loadmore', event)
}

0 comments on commit f50fba8

Please sign in to comment.