the outermost box is relatively positioned, but the height is zero. How can we make the outer box have the height of a picture?
this is the html code for this broadcast graph.
<template>
<div>
<transition-group tag="ul" :name="name" class="scroll-div">
<li v-for="(img,index) in imgs" v-show="index === mark" :key="index">
<a :href="img.url">
<img :src="img.picUrl">
</a>
</li>
</transition-group>
</div>
</template>
<script>
import axios from "axios";
import { setInterval } from "timers";
export default {
data() {
return {
mark: 0,
imgs: [],
name:""
};
},
methods: {
getImgs() {
axios.get("http://localhost:3000/banner").then(res => {
console.log(res.data.banners);
this.imgs = res.data.banners;
});
},
autoplay() {
this.markPP;
console.log(this.mark);
if (this.mark === 3) {
this.mark = 0;
}
},
play() {
setInterval(this.autoplay, 3000);
}
},
async created() {
await this.getImgs();
this.name = image;
},
mounted() {
this.play();
}
};
</script>
<style lang="scss" scoped>
.scroll-div {
width: 100%;
position: relative;
li {
width: 100%;
position: absolute;
img {
display: block;
width: 100%;
}
}
}
.image-enter-to {
transition: all 1s ease;
transform: translateX(0);
}
.image-leave-active {
transition: all 1s ease;
transform: translateX(-100%);
}
.image-enter {
transform: translateX(100%);
}
.image-leave {
transform: translateX(0);
}
</style>
imgs is the data I retrieved from the local server.
< hr > The previous problem withis that the picture is loaded asynchronously and the teansition-group is loaded first, so there is a blank piece of content.