Skip to content

Commit

Permalink
fix: 调整路由
Browse files Browse the repository at this point in the history
wuwei committed Jun 12, 2024
1 parent 440d3b4 commit 1ee9e19
Showing 3 changed files with 19 additions and 15 deletions.
8 changes: 4 additions & 4 deletions src/client/router/index.js
Original file line number Diff line number Diff line change
@@ -18,12 +18,12 @@ export const routes = [
path: "/english",
component: () => import("@/views/english/index.vue"),
},
{
path: "/simplevitualList",
component: () => import("@/views/simplevitualList/index.vue"),
},
],
},
{
path: "/simplevitualList",
component: () => import("@/views/simplevitualList/index.vue"),
},
{
path: "/bufferVitualList",
component: () => import("@/views/bufferVitualList/index.vue"),
2 changes: 1 addition & 1 deletion src/client/views/bufferVitualList/index.vue
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@

<script setup>
import { ref, computed, onBeforeMount } from "vue";
const data = ref(Array.from({ length: 20 }, (_, i) => i + 1));
const data = ref(Array.from({ length: 100 }, (_, i) => i + 1));
const itemHeight = 100;
24 changes: 14 additions & 10 deletions src/client/views/simplevitualList/index.vue
Original file line number Diff line number Diff line change
@@ -2,11 +2,15 @@
<div class="virtual" @scroll="onScroll">
<div
class="virtual-phantom"
:style="{ height: `${data.length * 100}px` }"></div>
:style="{ height: `${data.length * itemHeight}px` }"></div>
<div
class="virtual-list"
:style="{ transform: `translateY(${startTop}px)` }">
<div v-for="item in virtualList" :key="item" class="item">
<div
v-for="item in virtualList"
:key="item"
class="item"
:style="{ height: itemHeight + 'px' }">
{{ item }}
</div>
</div>
@@ -15,31 +19,32 @@

<script setup>
import { ref, computed } from "vue";
const data = ref(Array.from({ length: 20 }, (_, i) => i + 1));
const data = ref(Array.from({ length: 100 }, (_, i) => i + 1));
const start = ref(0);
const count = ref(10);
const count = ref(6);
const end = computed(() => start.value + count.value);
const itemHeight = 200;
const virtualList = computed(() => {
return data.value.slice(start.value, end.value);
});
const startTop = ref(0);
const onScroll = (e) => {
const scrollTop = e.target.scrollTop;
start.value = Math.floor(scrollTop / 100);
start.value = Math.floor(scrollTop / itemHeight);
// 向下取整(比较好理解)
// startTop.value =
// scrollTop % 100 ? Math.floor(scrollTop / 100) * 100 : scrollTop;
// scrollTop % itemHeight ? Math.floor(scrollTop / itemHeight) * itemHeight : scrollTop;
// 通用写法
startTop.value = scrollTop - (scrollTop % 100);
startTop.value = scrollTop - (scrollTop % itemHeight);
};
</script>

<style lang="scss" scoped>
.virtual {
flex: 1;
margin-top: 50px;
height: 100%;
overflow: auto;
position: relative;
.virtual-phantom {
@@ -56,7 +61,6 @@ const onScroll = (e) => {
right: 0;
bottom: 0;
.item {
height: 100px;
background-color: #eee;
display: flex;
justify-content: center;

0 comments on commit 1ee9e19

Please sign in to comment.