尝试优化选我的音乐列表内容很多时多选的卡顿问题
parent
10784e95bb
commit
b198b1945d
|
@ -5,3 +5,8 @@
|
|||
#### 优化
|
||||
|
||||
- 优化选择框动画效果
|
||||
- 尝试优化选我的音乐列表内容很多时多选的卡顿问题
|
||||
|
||||
#### 修复
|
||||
|
||||
- 修复列表延迟显示的Bug
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue