I use vue to make a page on the mobile side, and the following problems arise: when
v-for, as long as the internal complexity of the element is relatively complex (if there is only a single layer of div for each item, there will be no problem). There will be a brief gap when scrolling on the mobile side (which will not occur when debugging on the PC side).
preliminary guess is due to Virtual DOM (this didn"t appear in such a list that didn"t have to be done with vue before).
since I am new to vue, I don"t know how to solve this problem.
and v-for should do this scrolling list for most projects as well.
but the solution to similar problems can not be found on the Internet. Am I searching for the wrong keywords?
below is a screenshot of the simple project created to recreate the problem.
the following is the code to create a new project to recreate the problem:
<template>
<div class="bug-list">
<div v-for="item in list" :key="item.id" class="bug-item">
<div>{{item.text}}</div>
<div v-for="child in item.children" :key="child.id">
<span>{{child.text}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
list: []
};
},
props: {
msg: String
},
created() {
for (let i = 0; i != 1000; PPi) {
this.list.push({
id: i,
text: ` ${i} `,
children: [
{ id: 1, text: " 1" },
{ id: 2, text: " 2" }
]
})
}
}
}
</script>
<style scoped>
.bug-list {
position: absolute;
overflow-y: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
}
.bug-item {
border: 1px solid -sharpddd;
}
.bug-item:nth-of-type(2n) {
background-color: -sharpeee;
}
</style>