优化me页面
This commit is contained in:
zyronon
parent
8c3441a833
commit
082eef17e7
@ -51,7 +51,7 @@ let pageSize = 15
|
|||||||
!(function my() {
|
!(function my() {
|
||||||
// let data = {total: Mock.Random.natural(1, 20)}
|
// let data = {total: Mock.Random.natural(1, 20)}
|
||||||
// data[`list|${data.total > pageSize ? pageSize : data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
|
// data[`list|${data.total > pageSize ? pageSize : data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
|
||||||
let data = {total: 8}
|
let data = {total: 18}
|
||||||
data[`list|${data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
|
data[`list|${data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
|
||||||
Mock.mock(/my/, Mock.mock({data, code: 200, msg: '',}))
|
Mock.mock(/my/, Mock.mock({data, code: 200, msg: '',}))
|
||||||
}())
|
}())
|
||||||
|
|||||||
@ -356,37 +356,19 @@ export default {
|
|||||||
(!this.isScroll) && e.preventDefault();
|
(!this.isScroll) && e.preventDefault();
|
||||||
},
|
},
|
||||||
touchMove(e) {
|
touchMove(e) {
|
||||||
//距离顶部的距离
|
let canTransformY = this.refs.descHeight - this.floatHeight
|
||||||
let offsetTop = this.refs.descHeight - this.floatHeight
|
let touchMoveDistance = e.touches[0].pageY - this.startLocationY
|
||||||
// console.log('pageY', e.touches[0].pageY)
|
let pageMoveDistance = this.moveYDistance + touchMoveDistance * 1.2
|
||||||
// console.log('moveYDistance', this.moveYDistance)
|
|
||||||
let moveYDistance = e.touches[0].pageY - this.startLocationY
|
// console.log('move-pageMoveDistance', pageMoveDistance)
|
||||||
let distance = this.moveYDistance + moveYDistance * 1.2
|
|
||||||
// console.log('distance', distance)
|
|
||||||
//往上划
|
|
||||||
if (distance > 0) {
|
|
||||||
this.$refs.scroll.style.transform = `translate3d(0,0,0)`
|
|
||||||
if (distance < 400) {
|
|
||||||
// if (this.baseActiveIndex !== 0) return
|
|
||||||
// if (this.refs.header.getBoundingClientRect().top !== 0) return
|
|
||||||
this.refs.header.style.transition = 'all 0s'
|
|
||||||
this.refs.header.style.height = this.refs.headerHeight + (distance / 2) + 'px'
|
|
||||||
} else {
|
|
||||||
this.startLocationY = e.touches[0].pageY
|
|
||||||
this.moveYDistance = 400
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// console.log('s', e.touches[0].pageY - this.startLocationY)
|
|
||||||
// console.log('indicatorFixed', this.indicatorFixed)
|
|
||||||
if (this.indicatorFixed) {
|
if (this.indicatorFixed) {
|
||||||
let SlideItems = document.querySelectorAll('.SlideItem')
|
let SlideItems = document.querySelectorAll('.SlideItem')
|
||||||
let SlideItem = SlideItems[this.contentIndex]
|
let SlideItem = SlideItems[this.contentIndex]
|
||||||
|
|
||||||
// console.log(tt.scrollTop)
|
|
||||||
if (!this.isScroll) {
|
if (!this.isScroll) {
|
||||||
SlideItem.style.overflow = 'auto'
|
SlideItem.style.overflow = 'auto'
|
||||||
SlideItem.scrollTop = Math.abs(distance) - this.refs.descHeight + this.floatHeight
|
SlideItem.scrollTop = Math.abs(pageMoveDistance) - this.refs.descHeight + this.floatHeight
|
||||||
}
|
}
|
||||||
if (SlideItem.scrollTop === 0 && (e.touches[0].pageY - this.fixedLocationY) > 0) {
|
if (SlideItem.scrollTop === 0 && (e.touches[0].pageY - this.fixedLocationY) > 0) {
|
||||||
this.isScroll = this.indicatorFixed = false
|
this.isScroll = this.indicatorFixed = false
|
||||||
@ -395,126 +377,149 @@ export default {
|
|||||||
this.moveYDistance = -this.refs.descHeight + this.floatHeight
|
this.moveYDistance = -this.refs.descHeight + this.floatHeight
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.indicatorFixed = Math.abs(distance) > offsetTop
|
if (pageMoveDistance > 0) {
|
||||||
if (this.indicatorFixed) {
|
this.$refs.scroll.style.transform = `translate3d(0,0,0)`
|
||||||
this.fixedLocationY = e.touches[0].pageY
|
if (pageMoveDistance < 400) {
|
||||||
}
|
this.refs.header.style.transition = 'all 0s'
|
||||||
if (this.refs.defaultVideoSlideRowListHeight > this.refs.videoSlideRowListHeight) {
|
this.refs.header.style.height = this.refs.headerHeight + (pageMoveDistance / 2) + 'px'
|
||||||
let endTransformY = Math.abs(offsetTop) - (this.refs.defaultVideoSlideRowListHeight - this.refs.videoSlideRowListHeight)
|
} else {
|
||||||
this.$refs.scroll.style.transform = `translate3d(0,${
|
this.startLocationY = e.touches[0].pageY
|
||||||
distance > -endTransformY ? distance : -endTransformY
|
this.moveYDistance = 400
|
||||||
}px,0)`
|
}
|
||||||
this.floatFixed = Math.abs(distance) > 100
|
|
||||||
this.floatShowName = Math.abs(distance) > 150
|
|
||||||
} else {
|
} else {
|
||||||
this.floatFixed = Math.abs(distance) > 100
|
if (this.refs.defaultVideoSlideRowListHeight > this.refs.videoSlideRowListHeight) {
|
||||||
this.floatShowName = Math.abs(distance) > 150
|
let endTransformY = Math.abs(canTransformY) - (this.refs.defaultVideoSlideRowListHeight - this.refs.videoSlideRowListHeight)
|
||||||
this.$refs.scroll.style.transform = `translate3d(0,${this.indicatorFixed ? -offsetTop : distance}px,0)`
|
this.$refs.scroll.style.transform = `translate3d(0,${
|
||||||
|
pageMoveDistance > -endTransformY ? pageMoveDistance : -endTransformY
|
||||||
|
}px,0)`
|
||||||
|
// this.floatFixed = Math.abs(pageMoveDistance) > 100
|
||||||
|
// this.floatShowName = Math.abs(pageMoveDistance) > 150
|
||||||
|
} else {
|
||||||
|
this.indicatorFixed = Math.abs(pageMoveDistance) > canTransformY
|
||||||
|
// this.floatFixed = Math.abs(pageMoveDistance) > 100
|
||||||
|
// this.floatShowName = Math.abs(pageMoveDistance) > 150
|
||||||
|
this.$refs.scroll.style.transform = `translate3d(0,${this.indicatorFixed ? -canTransformY : pageMoveDistance}px,0)`
|
||||||
|
}
|
||||||
|
if (this.indicatorFixed) {
|
||||||
|
this.fixedLocationY = e.touches[0].pageY
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
touchEnd(e) {
|
touchEnd(e) {
|
||||||
// console.log('this.startLocationY', this.startLocationY)
|
let canTransformY = this.refs.descHeight - this.floatHeight
|
||||||
// debugger
|
let touchMoveDistance = e.changedTouches[0].pageY - this.startLocationY
|
||||||
let moveYDistance = e.changedTouches[0].pageY - this.startLocationY
|
let pageMoveDistance = this.moveYDistance + touchMoveDistance * 1.2
|
||||||
this.moveYDistance = this.moveYDistance + moveYDistance * 1.2//乘以1.2倍，加速滚动，不然看起来很慢
|
let endTransformY = Math.abs(canTransformY) - (this.refs.defaultVideoSlideRowListHeight - this.refs.videoSlideRowListHeight)
|
||||||
// console.log('end-moveYDistance', this.moveYDistance)
|
if (this.indicatorFixed) {
|
||||||
|
this.moveYDistance = -canTransformY
|
||||||
|
this.isScroll = true
|
||||||
//往上划，恢复header
|
} else {
|
||||||
if (this.moveYDistance > 0) {
|
// debugger
|
||||||
// if (this.baseActiveIndex !== 0) return
|
if (pageMoveDistance > 0) {
|
||||||
this.refs.header.style.transition = 'all .3s'
|
this.refs.header.style.transition = 'all .3s'
|
||||||
this.refs.header.style.height = this.refs.headerHeight + 'px'
|
this.refs.header.style.height = this.refs.headerHeight + 'px'
|
||||||
this.moveYDistance = 0
|
this.moveYDistance = 0
|
||||||
this.floatShowName = this.floatFixed = this.isScroll = false
|
this.floatShowName = this.floatFixed = this.isScroll = false
|
||||||
return
|
} else {
|
||||||
}
|
let endTime = Date.now()
|
||||||
|
let gapTime = endTime - this.startTime
|
||||||
// console.log('header-height', this.refs.descHeight - this.floatHeight)
|
//距离太小
|
||||||
// this.isScroll = Math.abs(this.moveYDistance) > this.refs.descHeight - this.floatHeight
|
if (Math.abs(touchMoveDistance) < 20) gapTime = 1000
|
||||||
//原谅我判断太多
|
//超过header的1/3
|
||||||
//如果没固定，则可以滚动到顶和底
|
if (Math.abs(touchMoveDistance) > (this.refs.descHeight / 2)) gapTime = 50
|
||||||
if (!this.indicatorFixed) {
|
// console.log('时间', gapTime)
|
||||||
//算出滚动距离
|
if (gapTime < 150) {
|
||||||
let distance = e.changedTouches[0].pageY - this.startLocationY
|
//往上划
|
||||||
// console.log('end-distance', distance)
|
if (touchMoveDistance > 0) {
|
||||||
let endTime = Date.now()
|
//时间短，滑动距离长，则应该快速滚动到顶部
|
||||||
let gapTime = endTime - this.startTime
|
gapTime = endTime - this.startTime
|
||||||
|
if (gapTime < 100 && Math.abs(touchMoveDistance) > 100) {
|
||||||
//距离太小
|
//用cancelAnimationFrame快速滚动到顶部，要比transition = 'all .3s'快
|
||||||
if (Math.abs(distance) < 20) gapTime = 1000
|
this.$refs.scroll.style.transition = 'none'
|
||||||
//超过header的1/3
|
let transformY = this.getTransform(this.$refs.scroll)
|
||||||
if (Math.abs(distance) > (this.refs.descHeight / 2)) gapTime = 50
|
//当前的transformY
|
||||||
// console.log('时间', gapTime)
|
// console.log('transformY', transformY)
|
||||||
if (gapTime < 150) {
|
let timer
|
||||||
//往上划
|
cancelAnimationFrame(timer);
|
||||||
if (distance > 0) {
|
let fn = () => {
|
||||||
//时间短，滑动距离长，则应该快速滚动到顶部
|
//说明没到顶
|
||||||
gapTime = endTime - this.startTime
|
if (transformY < 0) {
|
||||||
if (gapTime < 100 && Math.abs(distance) > 100) {
|
transformY = transformY + 40
|
||||||
//用cancelAnimationFrame快速滚动到顶部，要比transition = 'all .3s'快
|
this.$refs.scroll.style.transform = `translate3d(0,${transformY > 0 ? 0 : transformY}px,0)`
|
||||||
this.$refs.scroll.style.transition = 'none'
|
timer = requestAnimationFrame(fn);
|
||||||
let transformY = this.getTransform(this.$refs.scroll)
|
} else {
|
||||||
//当前的transformY
|
//transformY === 0说明，本来就在顶部，然后猛的一划,这里要判断下
|
||||||
// console.log('transformY', transformY)
|
if (transformY !== 0) {
|
||||||
let timer
|
if (this.$getCss(this.refs.header, 'height') < 400) {
|
||||||
cancelAnimationFrame(timer);
|
this.refs.header.style.transition = 'none'
|
||||||
let fn = () => {
|
this.refs.header.style.height = this.$getCss(this.refs.header, 'height') + 10 + 'px'
|
||||||
//说明没到顶
|
timer = requestAnimationFrame(fn);
|
||||||
if (transformY < 0) {
|
} else {
|
||||||
transformY = transformY + 40
|
this.refs.header.style.transition = 'all .6s'
|
||||||
this.$refs.scroll.style.transform = `translate3d(0,${transformY > 0 ? 0 : transformY}px,0)`
|
this.refs.header.style.height = this.refs.headerHeight + 'px'
|
||||||
timer = requestAnimationFrame(fn);
|
this.moveYDistance = 0
|
||||||
} else {
|
cancelAnimationFrame(timer);
|
||||||
//transformY === 0说明，本来就在顶部，然后猛的一划,这里要判断下
|
}
|
||||||
if (transformY !== 0) {
|
|
||||||
if (this.$getCss(this.refs.header, 'height') < 400) {
|
|
||||||
this.refs.header.style.transition = 'none'
|
|
||||||
this.refs.header.style.height = this.$getCss(this.refs.header, 'height') + 10 + 'px'
|
|
||||||
timer = requestAnimationFrame(fn);
|
|
||||||
} else {
|
} else {
|
||||||
this.refs.header.style.transition = 'all .6s'
|
//快速动画结束
|
||||||
this.refs.header.style.height = this.refs.headerHeight + 'px'
|
|
||||||
this.moveYDistance = 0
|
this.moveYDistance = 0
|
||||||
cancelAnimationFrame(timer);
|
cancelAnimationFrame(timer);
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
//快速动画结束
|
|
||||||
this.moveYDistance = 0
|
|
||||||
cancelAnimationFrame(timer);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
timer = requestAnimationFrame(fn);
|
||||||
|
} else {
|
||||||
|
//正常回弹动画
|
||||||
|
this.$refs.scroll.style.transition = 'all .3s'
|
||||||
|
this.$refs.scroll.style.transform = `translate3d(0,${touchMoveDistance > 0 ? 0 : -this.refs.descHeight}px,0)`
|
||||||
|
this.moveYDistance = touchMoveDistance > 0 ? 0 : -this.refs.descHeight
|
||||||
}
|
}
|
||||||
timer = requestAnimationFrame(fn);
|
this.moveYDistance = 0
|
||||||
|
this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = false
|
||||||
|
this.changeIndex(this.contentIndex, this.contentIndex)
|
||||||
|
let SlideItems = document.querySelectorAll('.SlideItem')
|
||||||
|
// let SlideItem = SlideItems[this.contentIndex]
|
||||||
|
SlideItems.forEach(SlideItem => {
|
||||||
|
SlideItem.style.overflow = 'auto'
|
||||||
|
SlideItem.scrollTop = 0
|
||||||
|
})
|
||||||
|
SlideItems.forEach(SlideItem => {
|
||||||
|
SlideItem.style.overflow = 'hidden'
|
||||||
|
})
|
||||||
} else {
|
} else {
|
||||||
//正常回弹动画
|
//往下划
|
||||||
this.$refs.scroll.style.transition = 'all .3s'
|
this.$refs.scroll.style.transition = 'all .3s'
|
||||||
this.$refs.scroll.style.transform = `translate3d(0,${distance > 0 ? 0 : -this.refs.descHeight}px,0)`
|
if (this.refs.defaultVideoSlideRowListHeight > this.refs.videoSlideRowListHeight) {
|
||||||
this.moveYDistance = distance > 0 ? 0 : -this.refs.descHeight
|
this.$refs.scroll.style.transform = `translate3d(0,${-endTransformY}px,0)`
|
||||||
|
// this.floatShowName = this.floatFixed = true
|
||||||
|
this.floatFixed = Math.abs(endTransformY) > 100
|
||||||
|
this.floatShowName = Math.abs(endTransformY) > 150
|
||||||
|
this.moveYDistance = -endTransformY
|
||||||
|
} else {
|
||||||
|
this.$refs.scroll.style.transform = `translate3d(0,${-this.refs.descHeight + this.floatHeight}px,0)`
|
||||||
|
this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = true
|
||||||
|
this.moveYDistance = -this.refs.descHeight + this.floatHeight
|
||||||
|
this.moveYDistance = pageMoveDistance
|
||||||
|
}
|
||||||
}
|
}
|
||||||
this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = false
|
|
||||||
this.changeIndex(this.contentIndex, this.contentIndex)
|
|
||||||
} else {
|
} else {
|
||||||
//往下划
|
// this.$refs.scroll.style.transition = 'all .3s'
|
||||||
this.$refs.scroll.style.transition = 'all .3s'
|
// if (this.refs.defaultVideoSlideRowListHeight > this.refs.videoSlideRowListHeight) {
|
||||||
let offsetTop = this.refs.descHeight - this.floatHeight
|
// this.$refs.scroll.style.transform = `translate3d(0,0,0)`
|
||||||
if (this.refs.defaultVideoSlideRowListHeight > this.refs.videoSlideRowListHeight) {
|
// // this.floatShowName = this.floatFixed = true
|
||||||
let endTransformY = Math.abs(offsetTop) - (this.refs.defaultVideoSlideRowListHeight - this.refs.videoSlideRowListHeight)
|
// this.floatFixed = Math.abs(endTransformY) > 100
|
||||||
this.$refs.scroll.style.transform = `translate3d(0,${-endTransformY}px,0)`
|
// this.floatShowName = Math.abs(endTransformY) > 150
|
||||||
// this.floatShowName = this.floatFixed = true
|
// this.moveYDistance = 0
|
||||||
this.floatFixed = Math.abs(endTransformY) > 100
|
// } else {
|
||||||
this.floatShowName = Math.abs(endTransformY) > 150
|
// this.$refs.scroll.style.transform = `translate3d(0,${-this.refs.descHeight + this.floatHeight}px,0)`
|
||||||
this.moveYDistance = -endTransformY
|
// this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = true
|
||||||
} else {
|
// this.moveYDistance = -this.refs.descHeight + this.floatHeight
|
||||||
this.$refs.scroll.style.transform = `translate3d(0,${-this.refs.descHeight + this.floatHeight}px,0)`
|
this.moveYDistance = pageMoveDistance
|
||||||
this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = true
|
// }
|
||||||
this.moveYDistance = -this.refs.descHeight + this.floatHeight
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
this.isScroll = true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getTransform(el) {
|
getTransform(el) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user