This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

优化滚动组件

old
宇天 2021-05-06 20:33:20 +08:00
parent 43b6faecbc
commit 0f9f6afc4b
1 changed files with 24 additions and 49 deletions

View File

@ -163,13 +163,7 @@ export default class Scroll {
set scrollTop(n) { set scrollTop(n) {
n = +n n = +n
if (n === n) { if (n === n) {
// var { scrollY, height, yh } = this.props
this.__BOX__.scrollTop = n this.__BOX__.scrollTop = n
// var fixedY = (this.__BOX__.scrollTop / (scrollY - height)) * (height - yh)
// this.props.thumbY = fixedY
// this.__Y__.style.transform = `translateY(${fixedY}px)`
} }
} }
@ -180,13 +174,7 @@ export default class Scroll {
set scrollLeft(n) { set scrollLeft(n) {
n = +n n = +n
if (n === n) { if (n === n) {
// var { scrollX, width, xw } = this.props
this.__BOX__.scrollLeft = n this.__BOX__.scrollLeft = n
// var fixedX = (this.__BOX__.scrollLeft / (scrollX - width)) * (width - xw)
// this.props.thumbX = fixedX
// this.__X__.style.transform = `translateX(${fixedX}px)`
} }
} }
@ -199,28 +187,29 @@ export default class Scroll {
} }
_fetchScrollX(moveX) { _fetchScrollX(moveX) {
var { scrollX, width, xw } = this.props var { scrollX, width, xBar } = this.state
if (moveX < 0) { if (moveX < 0) {
moveX = 0 moveX = 0
} else if (moveX > width - xw) { } else if (moveX > width - xBar) {
moveX = width - xw moveX = width - xBar
} }
this.__BOX__.scrollLeft = (scrollX - width) * (moveX / (width - xw)) this.__BOX__.scrollLeft = moveX
this.__X__.style.transform = `translateX(${moveX}px)` this.__X__.style.transform = `translateX(${moveX}px)`
return moveX return moveX
} }
_fetchScrollY(moveY) { _fetchScrollY(moveY) {
var { scrollY, height, yh } = this.props var { scrollY, height, yBar } = this.state
if (moveY < 0) { if (moveY < 0) {
moveY = 0 moveY = 0
} else if (moveY > height - yh) { } else if (moveY > height - yBar) {
moveY = height - yh moveY = height - yBar
} }
this.__BOX__.scrollTop = (scrollY - height) * (moveY / (height - yh))
this.__BOX__.scrollTop = moveY
this.__Y__.style.transform = `translateY(${moveY}px)` this.__Y__.style.transform = `translateY(${moveY}px)`
return moveY return moveY
} }
@ -288,9 +277,9 @@ export default class Scroll {
}) })
// 鼠标滚动事件 // 鼠标滚动事件
this._wheelFn = $.bind(this.__BOX__, 'scroll', ev => { this._scrollFn = $.bind(this.__BOX__, 'scroll', ev => {
// 禁用状态, 不允许滚动 // 拖拽时忽略滚动事件
if (this.disabled) { if (this._active) {
return return
} }
var { axis } = this.props var { axis } = this.props
@ -306,7 +295,6 @@ export default class Scroll {
} = this.state } = this.state
var currTop = this.__BOX__.scrollTop var currTop = this.__BOX__.scrollTop
var currLeft = this.__BOX__.scrollLeft var currLeft = this.__BOX__.scrollLeft
var now = Date.now()
// x轴 y轴 都为0时, 不作任何处理 // x轴 y轴 都为0时, 不作任何处理
if (xBar === 0 && yBar === 0) { if (xBar === 0 && yBar === 0) {
@ -352,22 +340,20 @@ export default class Scroll {
} }
} }
this.stamp = now
this.dispatchEvent(new CustomEvent('scroll')) this.dispatchEvent(new CustomEvent('scroll'))
}) })
/* var startX, let startX,
startY, startY,
moveX, moveX,
moveY, moveY,
mousemoveFn = ev => { mousemoveFn = ev => {
var { thumbY, thumbX } = this.props let { thumbY, thumbX } = this.state
if (startX !== null) { if (startX !== null) {
moveX = this._fetchScrollX(thumbX + ev.pageX - startX) moveX = this._fetchScrollX(thumbX + ev.pageX - startX)
} }
if (startY !== null) { if (startY !== null) {
this._active = true
moveY = this._fetchScrollY(thumbY + ev.pageY - startY) moveY = this._fetchScrollY(thumbY + ev.pageY - startY)
} }
}, },
@ -377,40 +363,30 @@ export default class Scroll {
} }
startX = null startX = null
startY = null startY = null
this.props.thumbX = moveX this.state.thumbX = moveX || 0
this.props.thumbY = moveY this.state.thumbY = moveY || 0
delete this._active
$.unbind(document, 'mousemove', mousemoveFn) $.unbind(document, 'mousemove', mousemoveFn)
$.unbind(document, 'mouseup', mouseupFn) $.unbind(document, 'mouseup', mouseupFn)
} }
$.bind(this.__Y__, 'mousedown', ev => { $.bind(this.__Y__, 'mousedown', ev => {
startY = ev.pageY startY = ev.pageY
if (!this.props.thumbY) {
this.props.thumbY = 0 this._active = true
}
// 禁用状态, 不允许滚动
if (this.disabled) {
return
}
$.bind(document, 'mousemove', mousemoveFn) $.bind(document, 'mousemove', mousemoveFn)
$.bind(document, 'mouseup', mouseupFn) $.bind(document, 'mouseup', mouseupFn)
}) })
$.bind(this.__X__, 'mousedown', ev => { $.bind(this.__X__, 'mousedown', ev => {
startX = ev.pageX startX = ev.pageX
if (!this.props.thumbX) { this._active = true
this.props.thumbX = 0
}
// 禁用状态, 不允许滚动
if (this.disabled) {
return
}
$.bind(document, 'mousemove', mousemoveFn) $.bind(document, 'mousemove', mousemoveFn)
$.bind(document, 'mouseup', mouseupFn) $.bind(document, 'mouseup', mouseupFn)
}) })
*/
// this.__observer = new MutationObserver(this._initFn) // this.__observer = new MutationObserver(this._initFn)
// this.__observer.observe(this, { // this.__observer.observe(this, {
// childList: true, // childList: true,
@ -422,9 +398,8 @@ export default class Scroll {
unmount() { unmount() {
// this.__observer.disconnect() // this.__observer.disconnect()
$.unbind(this.__BOX__, 'mouseenter', this._initFn) $.unbind(this, 'mouseenter', this._initFn)
$.unbind(this.__BOX__, 'mouseleave', this._inactiveFn) $.unbind(this.__BOX__, 'scroll', this._scrollFn)
$.unbind(this.__BOX__, 'wheel', this._wheelFn)
} }
watch() { watch() {