diff --git a/package.json b/package.json index 8ed6ada..104ec07 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@bd/ui", - "version": "0.1.17", + "version": "0.1.18", "type": "module", "description": "", "files": [ diff --git a/src/scroll/scroll.js b/src/scroll/scroll.js index 48acfa0..71212bb 100644 --- a/src/scroll/scroll.js +++ b/src/scroll/scroll.js @@ -4,13 +4,13 @@ * @date 2023/03/20 15:17:25 */ -import { css, html, bind, unbind, Component } from 'wkit' +import { css, html, bind, unbind, Component, nextTick } from 'wkit' class Scroll extends Component { static props = { axis: 'xy', // 滚动方向, 默认x轴和y轴都可以滚动 delay: 1000, // 节流防抖延迟 - distance: 1 // 触发距离阀值, 单位像素 + threshold: 10 // 触发距离阀值, 单位像素 } static styles = [ @@ -263,17 +263,17 @@ class Scroll extends Component { _fireReachEnd(action = 'reach-bottom') { let delay = this.delay - let { scrollHeight, offsetHeight: height } = this + let { scrollHeight, offsetHeight: height, threshold } = this let top = this.scrollTop let now = Date.now() if (now - this.stamp > delay) { if (action === 'reach-bottom') { - if (height + top < scrollHeight) { + if (scrollHeight - height - top > threshold) { return } } else { - if (top > 0) { + if (top > threshold) { return } } @@ -299,7 +299,7 @@ class Scroll extends Component { } }, mouseupFn = ev => { - if (Math.abs(ev.pageY - startY) > this.distance) { + if (Math.abs(ev.pageY - startY) > 30) { this._fireReachEnd(ev.pageY > startY ? 'reach-bottom' : 'reach-top') } startX = undefined @@ -308,12 +308,11 @@ class Scroll extends Component { this.cache.thumbY = moveY || 0 delete this._active unbind(document, 'mousemove', mousemoveFn) - unbind(document, 'mouseup', mouseupFn) } // 鼠标滚动事件 bind(this.$refs.box, 'scroll', ev => { - ev.stopPropagation() + // ev.stopPropagation() // 拖拽时忽略滚动事件 if (this._active) { return @@ -348,7 +347,7 @@ class Scroll extends Component { this.cache.thumbY = fixedY this.$refs.y.style.transform = `translateY(${fixedY}px)` - if (Math.abs(fixedY - thumbY) > this.distance) { + if (Math.abs(fixedY - thumbY) > 5) { this._fireReachEnd(fixedY > thumbY ? 'reach-bottom' : 'reach-top') } } @@ -368,7 +367,7 @@ class Scroll extends Component { } } - this.$emit('scroll') + // this.$emit('scroll') }) bind(this.$refs.y, 'mousedown', ev => { @@ -377,7 +376,7 @@ class Scroll extends Component { this._active = true bind(document, 'mousemove', mousemoveFn) - bind(document, 'mouseup', mouseupFn) + bind(document, 'mouseup', mouseupFn, { once: true }) }) bind(this.$refs.x, 'mousedown', ev => { @@ -385,7 +384,7 @@ class Scroll extends Component { this._active = true bind(document, 'mousemove', mousemoveFn) - bind(document, 'mouseup', mouseupFn) + bind(document, 'mouseup', mouseupFn, { once: true }) }) this.__observer = new ResizeObserver(this.__init__.bind(this))