diff --git a/publish/changeLog.md b/publish/changeLog.md index 3c4b319c..27315b88 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -1,3 +1,7 @@ +### 优化 + +- 优化我的列表、下载列表等列表的滚动流畅度 + ### 修复 - 修复某些情况下获取URL失败时会意外切歌的问题 diff --git a/src/renderer/components/material/VirtualizedList.vue b/src/renderer/components/material/VirtualizedList.vue index 6246756a..f53bd152 100644 --- a/src/renderer/components/material/VirtualizedList.vue +++ b/src/renderer/components/material/VirtualizedList.vue @@ -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')