面试代码学习
父组件：
<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>