修复scroll组件的事件逻辑

master
yutent 2024-11-08 12:02:43 +08:00
parent 6449580262
commit 9feab73d46
2 changed files with 12 additions and 13 deletions

View File

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

View File

@ -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))