优化我的列表、下载列表等列表的滚动流畅度

pull/733/head
lyswhut 2021-10-30 12:16:58 +08:00
parent 58f016ca00
commit f0f92952d6
2 changed files with 16 additions and 13 deletions

View File

@ -1,3 +1,7 @@
### 优化
- 优化我的列表、下载列表等列表的滚动流畅度
### 修复
- 修复某些情况下获取URL失败时会意外切歌的问题

View File

@ -82,7 +82,7 @@ export default {
},
outsideNum: {
type: Number,
default: 10,
default: 1,
},
itemHeight: {
type: Number,
@ -101,7 +101,6 @@ export default {
data() {
return {
views: [],
isWaitingUpdate: false,
startIndex: -1,
endIndex: -1,
scrollTop: 0,
@ -138,16 +137,15 @@ export default {
this.updateView()
},
beforeDestroy() {
this.$refs.dom_scrollContainer.removeEventListener('scroll', this.onScroll)
if (this.cancelScroll) this.cancelScroll()
},
methods: {
onScroll(event) {
if (this.isWaitingUpdate) return
this.isWaitingUpdate = true
window.requestAnimationFrame(() => {
this.updateView()
this.isWaitingUpdate = false
})
const currentScrollTop = this.$refs.dom_scrollContainer.scrollTop
if (Math.abs(currentScrollTop - this.scrollTop) > this.itemHeight * this.outsideNum * 0.6) {
this.updateView(currentScrollTop)
}
this.$emit('scroll', event)
},
@ -168,17 +166,18 @@ export default {
return list
},
updateView() {
const currentScrollTop = this.$refs.dom_scrollContainer.scrollTop
updateView(currentScrollTop = this.$refs.dom_scrollContainer.scrollTop) {
// const currentScrollTop = this.$refs.dom_scrollContainer.scrollTop
const currentStartIndex = Math.floor(currentScrollTop / this.itemHeight)
const currentEndIndex = currentStartIndex + Math.ceil(this.$refs.dom_scrollContainer.clientHeight / this.itemHeight)
const scrollContainerHeight = this.$refs.dom_scrollContainer.clientHeight
const currentEndIndex = currentStartIndex + Math.ceil(scrollContainerHeight / this.itemHeight)
const continuous = currentStartIndex <= this.endIndex && currentEndIndex >= this.startIndex
const currentStartRenderIndex = Math.max(Math.floor(currentScrollTop / this.itemHeight) - this.outsideNum, 0)
const currentEndRenderIndex = currentStartIndex + Math.ceil(this.$refs.dom_scrollContainer.clientHeight / this.itemHeight) + this.outsideNum
const currentEndRenderIndex = currentStartIndex + Math.ceil(scrollContainerHeight / this.itemHeight) + this.outsideNum
// console.log(continuous)
// debugger
if (continuous) {
if (Math.abs(currentScrollTop - this.scrollTop) < this.itemHeight * this.outsideNum * 0.6) return
// if (Math.abs(currentScrollTop - this.scrollTop) < this.itemHeight * this.outsideNum * 0.6) return
// console.log('update')
if (currentScrollTop > this.scrollTop) { // scroll down
// console.log('scroll down')