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-07 22:56:15 +08:00
parent 7f420b0caa
commit fa25b5d4d8
1 changed files with 19 additions and 18 deletions

View File

@ -139,8 +139,8 @@ export default class Scroll {
state = { state = {
width: 0, // 滚动组件的真实宽度 width: 0, // 滚动组件的真实宽度
height: 0, // 滚动组件的真实高度 height: 0, // 滚动组件的真实高度
scrollX: 0, // 滚动组件的滚动宽度 scrollWidth: 0, // 滚动组件的滚动宽度
scrollY: 0, // 滚动组件的滚动高度 scrollHeight: 0, // 滚动组件的滚动高度
xBar: 0, // 横轴长度 xBar: 0, // 横轴长度
yBar: 0, // 纵轴长度 yBar: 0, // 纵轴长度
thumbX: 0, //横向条滚动距离 thumbX: 0, //横向条滚动距离
@ -187,21 +187,21 @@ export default class Scroll {
} }
_fetchScrollX(moveX) { _fetchScrollX(moveX) {
var { scrollX, width, xBar } = this.state var { scrollWidth, width, xBar } = this.state
if (moveX < 0) { if (moveX < 0) {
moveX = 0 moveX = 0
} else if (moveX > width - xBar) { } else if (moveX > width - xBar) {
moveX = width - xBar moveX = width - xBar
} }
this.__BOX__.scrollLeft = (scrollX - width) * (moveX / (width - xBar)) this.__BOX__.scrollLeft = (scrollWidth - width) * (moveX / (width - xBar))
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, yBar } = this.state var { scrollHeight, height, yBar } = this.state
if (moveY < 0) { if (moveY < 0) {
moveY = 0 moveY = 0
@ -209,20 +209,20 @@ export default class Scroll {
moveY = height - yBar moveY = height - yBar
} }
this.__BOX__.scrollTop = (scrollY - height) * (moveY / (height - yBar)) this.__BOX__.scrollTop = (scrollHeight - height) * (moveY / (height - yBar))
this.__Y__.style.transform = `translateY(${moveY}px)` this.__Y__.style.transform = `translateY(${moveY}px)`
return moveY return moveY
} }
_fireReachEnd(action = 'reach-bottom') { _fireReachEnd(action = 'reach-bottom') {
var { delay } = this.props var { delay } = this.props
var { scrollY, height } = this.state var { scrollHeight, height } = this.state
var top = this.__BOX__.scrollTop var top = this.__BOX__.scrollTop
var now = Date.now() var now = Date.now()
if (now - this.__last__ > delay) { if (now - this.__last__ > delay) {
if (action === 'reach-bottom') { if (action === 'reach-bottom') {
if (height + top < scrollY) { if (height + top < scrollHeight) {
return return
} }
} else { } else {
@ -242,11 +242,11 @@ export default class Scroll {
// 需要减去因为隐藏原生滚动条修正的18像素 // 需要减去因为隐藏原生滚动条修正的18像素
var width = this.__BOX__.clientWidth - 18 var width = this.__BOX__.clientWidth - 18
var height = this.__BOX__.clientHeight - 18 var height = this.__BOX__.clientHeight - 18
var scrollX = this.__BOX__.scrollWidth - 18 var scrollWidth = this.__BOX__.scrollWidth - 18
var scrollY = this.__BOX__.scrollHeight - 18 var scrollHeight = this.__BOX__.scrollHeight - 18
var yBar = (height * (height / scrollY)) >> 0 // 滚动条的高度 var yBar = (height * (height / scrollHeight)) >> 0 // 滚动条的高度
var xBar = (width * (width / scrollX)) >> 0 // 滚动条的宽度 var xBar = (width * (width / scrollWidth)) >> 0 // 滚动条的宽度
if (yBar < 50) { if (yBar < 50) {
yBar = 50 yBar = 50
@ -265,8 +265,8 @@ export default class Scroll {
this.state.height = height this.state.height = height
this.state.width = width this.state.width = width
this.state.scrollY = scrollY this.state.scrollHeight = scrollHeight
this.state.scrollX = scrollX this.state.scrollWidth = scrollWidth
this.state.yBar = yBar this.state.yBar = yBar
this.state.xBar = xBar this.state.xBar = xBar
@ -286,8 +286,8 @@ export default class Scroll {
yBar, yBar,
thumbX, thumbX,
thumbY, thumbY,
scrollY, scrollHeight,
scrollX, scrollWidth,
width, width,
height height
} = this.state } = this.state
@ -298,13 +298,14 @@ export default class Scroll {
if (xBar === 0 && yBar === 0) { if (xBar === 0 && yBar === 0) {
return return
} }
console.log(currTop, currLeft)
// //
if (axis === 'y' || axis === 'xy') { if (axis === 'y' || axis === 'xy') {
if (yBar) { if (yBar) {
// 修正滚动条的位置 // 修正滚动条的位置
// 滚动比例 y 滚动条的可移动距离 // 滚动比例 y 滚动条的可移动距离
let fixedY = (currTop / (scrollY - height)) * (height - yBar) let fixedY = (currTop / (scrollHeight - height)) * (height - yBar)
fixedY = fixedY >> 0 fixedY = fixedY >> 0
@ -325,7 +326,7 @@ export default class Scroll {
if (xBar) { if (xBar) {
// 修正滚动条的位置 // 修正滚动条的位置
// 滚动比例 x 滚动条的可移动距离 // 滚动比例 x 滚动条的可移动距离
let fixedX = (currLeft / (scrollX - width)) * (width - xBar) let fixedX = (currLeft / (scrollWidth - width)) * (width - xBar)
fixedX = fixedX >> 0 fixedX = fixedX >> 0