尝试优化选我的音乐列表内容很多时多选的卡顿问题

pull/96/head
lyswhut 2019-10-04 18:04:01 +08:00
parent 10784e95bb
commit b198b1945d
4 changed files with 58 additions and 8 deletions

View File

@ -5,3 +5,8 @@
#### 优化
- 优化选择框动画效果
- 尝试优化选我的音乐列表内容很多时多选的卡顿问题
#### 修复
- 修复列表延迟显示的Bug

View File

@ -3,9 +3,9 @@ div(:class="$style.checkbox")
input(:type="need ? 'radio' : 'checkbox'" :class="$style.input" :id="id" :disabled="disabled" :value="value" :name="name" @change="change" v-model="bool")
label(:for="id" :class="$style.content")
div(v-if="indeterminate" :class="$style.container")
svg(v-show="indeterminate" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 32 448 448' space='preserve')
svg(v-show="indeterminate" :class="$style.icon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 32 448 448' space='preserve')
use(xlink:href='#icon-check-indeterminate')
svg(v-show="!indeterminate" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 0 448 512' space='preserve')
svg(v-show="!indeterminate" :class="$style.icon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 0 448 512' space='preserve')
use(xlink:href='#icon-check-true')
div(v-else :class="$style.container")
svg(version='1.1' :class="$style.icon" xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 32 448 448' space='preserve')
@ -73,9 +73,9 @@ export default {
let bool = this.bool
if (this.indeterminate) {
bool = true
this.$nextTick(() => {
this.bool = true
})
// this.$nextTick(() => {
this.bool = true
// })
}
checked = bool
}

View File

@ -303,3 +303,37 @@ export const throttle = (fn, delay = 100) => {
}, delay)
}
}
const async_removeItem = (arr, num, callback) => window.requestAnimationFrame(() => {
let len = arr.length
if (len > num) {
arr.splice(0, num)
return async_removeItem(arr, num, callback)
} else {
arr.splice(0, len)
return callback()
}
})
const async_addItem = (arr, newArr, num, callback) => window.requestAnimationFrame(() => {
let len = newArr.length
if (len > num) {
arr.push(...newArr.splice(0, num))
return async_addItem(arr, newArr, num, callback)
} else {
arr.push(...newArr.splice(0, len))
return callback()
}
})
/**
* 异步设置数组
* @param {*} from 原数组
* @param {*} to 设置后的数组内容
* @param {*} num 每次设置的个数
*/
export const asyncSetArray = (from, to, num = 100) => new Promise(resolve => {
async_removeItem(from, num, () => {
async_addItem(from, Array.from(to), num, () => {
resolve()
})
})
})

View File

@ -47,7 +47,7 @@
<script>
import { mapMutations, mapGetters, mapActions } from 'vuex'
import { throttle } from '../utils'
import { throttle, asyncSetArray } from '../utils'
export default {
name: 'List',
data() {
@ -66,6 +66,7 @@ export default {
routeLeaveLocation: null,
isShowListAdd: false,
isShowListAddMultiple: false,
delayTimeout: null,
}
},
computed: {
@ -146,6 +147,7 @@ export default {
// }
// },
beforeRouteLeave(to, from, next) {
this.clearDelayTimeout()
this.routeLeaveLocation = (this.list.length && this.$refs.dom_scrollContent.scrollTop) || 0
next()
},
@ -170,8 +172,10 @@ export default {
setPlayList: 'setList',
}),
handleDelayShow() {
this.clearDelayTimeout()
if (this.list.length > 150) {
setTimeout(() => {
this.delayTimeout = setTimeout(() => {
this.delayTimeout = null
this.delayShow = true
this.restoreScroll()
}, 200)
@ -180,7 +184,14 @@ export default {
this.restoreScroll()
}
},
clearDelayTimeout() {
if (this.delayTimeout) {
clearTimeout(this.delayTimeout)
this.delayTimeout = null
}
},
restoreScroll() {
if (!this.list.length) return
let location = this.setting.list.scroll.locations[this.listId]
if (this.setting.list.scroll.enable && location) {
this.$nextTick(() => {
@ -238,7 +249,7 @@ export default {
this.isShowDownload = false
},
handleSelectAllData(isSelect) {
this.selectdData = isSelect ? [...this.list] : []
asyncSetArray(this.selectdData, isSelect ? [...this.list] : [])
},
resetSelect() {
this.isSelectAll = false