pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化me页面

pull/19/head
zyronon 4 years ago
parent
8c3441a833
commit
082eef17e7
2 changed files with 133 additions and 128 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/mock/index.js
  2. 259
      src/pages/me/Me2.vue

2
src/mock/index.js
Unescape View File

@ -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: '',}))
}()) }())

259
src/pages/me/Me2.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save