이 기사에서는 메시지의 원활한 스크롤 효과를 구현하기 위한 Vue의 샘플 코드를 주로 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 살펴보겠습니다
내 친구의 프로젝트에서 메시지가 원활하게 스크롤되는 효과를 얻고 싶었습니다. 그 과정에서 각 메시지 그룹이 스크롤되고 다시 순환되는 현상이 발생했습니다. 두 배로 오래 머무르는 문제.. 하루 공부한 끝에 드디어 이 1S의 작은 문제를 해결했습니다
프로젝트 환경 vue-cli, 해당 환경과 라우팅을 직접 구성해주세요
여기서는 주로 구현 방법을 소개합니다. 첫 번째 단계는 템플릿의 v-for 메소드 루프를 사용하는 것입니다. Out the message list
<template>
<p id="box">
<ul id="con1" ref="con1" :class="{anim:animate==true}">
<li v-for='item in items'>{{item.name}}</li>
</ul>
</p>
</template>두 번째 단계는
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
