bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

修复scroll组件的事件逻辑

master
yutent 2024-11-08 12:02:43 +08:00
parent 6449580262
commit 9feab73d46
2 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@bd/ui", "name": "@bd/ui",
"version": "0.1.17", "version": "0.1.18",
"type": "module", "type": "module",
"description": "", "description": "",
"files": [ "files": [

23
src/scroll/scroll.js
View File

@ -4,13 +4,13 @@
* @date 2023/03/20 15:17:25 * @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 { class Scroll extends Component {
static props = { static props = {
axis: 'xy', // 滚动方向, 默认x轴和y轴都可以滚动 axis: 'xy', // 滚动方向, 默认x轴和y轴都可以滚动
delay: 1000, // 节流防抖延迟 delay: 1000, // 节流防抖延迟
distance: 1 // 触发距离阀值, 单位像素 threshold: 10 // 触发距离阀值, 单位像素
} }
static styles = [ static styles = [
@ -263,17 +263,17 @@ class Scroll extends Component {
_fireReachEnd(action = 'reach-bottom') { _fireReachEnd(action = 'reach-bottom') {
let delay = this.delay let delay = this.delay
let { scrollHeight, offsetHeight: height } = this let { scrollHeight, offsetHeight: height, threshold } = this
let top = this.scrollTop let top = this.scrollTop
let now = Date.now() let now = Date.now()
if (now - this.stamp > delay) { if (now - this.stamp > delay) {
if (action === 'reach-bottom') { if (action === 'reach-bottom') {
if (height + top < scrollHeight) { if (scrollHeight - height - top > threshold) {
return return
} }
} else { } else {
if (top > 0) { if (top > threshold) {
return return
} }
} }
@ -299,7 +299,7 @@ class Scroll extends Component {
} }
}, },
mouseupFn = ev => { 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') this._fireReachEnd(ev.pageY > startY ? 'reach-bottom' : 'reach-top')
} }
startX = undefined startX = undefined
@ -308,12 +308,11 @@ class Scroll extends Component {
this.cache.thumbY = moveY || 0 this.cache.thumbY = moveY || 0
delete this._active delete this._active
unbind(document, 'mousemove', mousemoveFn) unbind(document, 'mousemove', mousemoveFn)
unbind(document, 'mouseup', mouseupFn)
} }
// 鼠标滚动事件 // 鼠标滚动事件
bind(this.$refs.box, 'scroll', ev => { bind(this.$refs.box, 'scroll', ev => {
ev.stopPropagation() // ev.stopPropagation()
// 拖拽时忽略滚动事件 // 拖拽时忽略滚动事件
if (this._active) { if (this._active) {
return return
@ -348,7 +347,7 @@ class Scroll extends Component {
this.cache.thumbY = fixedY this.cache.thumbY = fixedY
this.$refs.y.style.transform = `translateY(${fixedY}px)` 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') 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 => { bind(this.$refs.y, 'mousedown', ev => {
@ -377,7 +376,7 @@ class Scroll extends Component {
this._active = true this._active = true
bind(document, 'mousemove', mousemoveFn) bind(document, 'mousemove', mousemoveFn)
bind(document, 'mouseup', mouseupFn) bind(document, 'mouseup', mouseupFn, { once: true })
}) })
bind(this.$refs.x, 'mousedown', ev => { bind(this.$refs.x, 'mousedown', ev => {
@ -385,7 +384,7 @@ class Scroll extends Component {
this._active = true this._active = true
bind(document, 'mousemove', mousemoveFn) bind(document, 'mousemove', mousemoveFn)
bind(document, 'mouseup', mouseupFn) bind(document, 'mouseup', mouseupFn, { once: true })
}) })
this.__observer = new ResizeObserver(this.__init__.bind(this)) this.__observer = new ResizeObserver(this.__init__.bind(this))