面试代码学习
父组件:
<template>
<div class="box">
<!--items总条数、 size数据高度、 shownumber每次渲染数据-->
<list :items="items" :size="60" :shownumber="10"></list>
</div>
</div>
</template>
<script>
import list from './list.vue'
export default {
components: {
list,
},
data() {
return {}
},
computed: {
items() {
return Array(10000).fill('').map((item, index) => {
return {
id: index,
content: '列表内容' + index
}
})
}
}
};
</script>
子组件
list.vue
<template>
<div class="container" :style="{ height: containerHeight }" @scroll="handleScroll" ref="container">
<!-- list 高度为 所有数据的高度 listTop 动态改变高度位置-->
<div class="list" :style="{ top: listTop }">
<div v-for="item in showData" :key="item.id" :style="{height: size + 'px'}">
{{ item.content }}
</div>
<!-- 撑开所有元素列表高度 -->
<div class="bar" :style="{height: barHeight}"></div>
</div>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true
},
size: {
type: Number,
required: true
},
shownumber: {
type: Number,
required: true
}
},
data() {
return {
start: 0, // 起始下标
end: this.shownumber, // 结束下标
}
},
computed: {
// 展示数据
showData() {
return this.items.slice(this.start, this.end)
},
// 列表高度
containerHeight() {
return this.size * this.shownumber + 'px'
},
// 撑开容器高度的元素高度
barHeight() {
return this.size * this.items.length - this.start * this.size + 'px'
},
// 列表 距离顶部的距离
listTop() {
return this.start * this.size + 'px'
}
},
methods: {
// 滚动事件
handleScroll() {
// 获取滚动条距离顶部的距离
const scrollTop = this.$refs.container.scrollTop
// 计算卷去的数据条数,用计算的结果作为获取数据的起始和结束下标
// 起始下标就是券去的数据条数向下取整
this.start = Math.floor(scrollTop / this.size)
// 结束的下标就是起始下标加上展示的条数
this.end = Math.min(this.start + this.shownumber, this.items.length)
console.log(this.start + '---' + this.end)
}
}
}
</script>
<style scoped>
.container {
overflow-y: auto;
background-color: rgba(255, 255, 255, 0.5);
font-size: 20px;
font-weight: bold;
line-height: 60px;
width: 500px;
margin: 0 auto;
position: relative;
text-align: center;
}
.list {
position: absolute;
top: 0;
width: 100%;
}
</style>