32 lines
777 B
Vue
32 lines
777 B
Vue
<template>
|
||
<div>
|
||
<div>滚动下面的容器，通过开发者工具中的观察网络请求：</div>
|
||
<div class="demo-image__lazy">
|
||
<tiny-image v-for="url in srcList" :key="url" :src="url" lazy></tiny-image>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { Image as TinyImage } from '@opentiny/vue'
|
||
|
||
const srcList = ref([
|
||
`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
|
||
`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/book.jpg`,
|
||
`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/bridge.jpg`
|
||
])
|
||
</script>
|
||
|
||
<style scoped>
|
||
.demo-image__lazy {
|
||
height: 300px;
|
||
overflow-y: auto;
|
||
margin-top: 20px;
|
||
}
|
||
.demo-image__lazy .tiny-image {
|
||
display: block;
|
||
min-height: 500px;
|
||
}
|
||
</style>
|