you need to achieve this upward seamless scrolling band pause in vue, where there are multiple li scrolls in a container, one li at a time, scrolling one at a time, and then stopping and scrolling again. I wrote that there is a problem, and every time I scroll, it seems to have been pulled down. It may be because I assigned the animate to false.
I tried to use the transition encapsulated in vue, but I didn"t. The position of the upper right corner of this effect is needed to get
out
https://zt.weidai.com.cn/shar.
<ul class="carInfo" :class="{anim:animate==true}">
<li v-for="item in carDynamic">
<div class="carNo">
: {{item.licenseNo}}
</div>
<div class="carInfo-detail">
<p class="p1">
<span>{{item.address}}</span>
<span>:<em>{{item.speed}}</em></span>
<p class="p2">
<span></span>
<span>:<em>{{item.time}}</em></span>
</div>
</li>
</ul>
</div>
mounted() {
this.init();
setInterval(this.scroll,1000);},
methods: {
init() {
map = new AMap.Map("container", {
center: [116.397428, 39.90923],
resizeEnable: true,
zoom: 10
})
},
scroll(){
this.animate=true;
setTimeout(()=>{
this.carDynamic.push(this.carDynamic[0]);
this.carDynamic.shift();
this.animate=false;
},500)
}
.anim {
transition: all 2s;
margin-top: -200px;}
problem description
the environmental background of the problems and what methods you have tried
related codes
/ / Please paste the code text below (do not replace the code with pictures)