この記事では主に、メッセージのシームレスなスクロール効果を実現するための Vue のサンプル コードを紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう
私の友人のプロジェクトでは、メッセージをシームレスにスクロールする効果を実現したいと思っていましたが、その過程でメッセージの各グループが再度スクロールされ、循環されるという小さなバグが発生しました。この1Sの小さな問題は、1日勉強してやっと解決しました
プロジェクト環境vue-cliは、対応する環境とルーティングを自分で設定してください
ここでは主に実装方法を紹介します。最初のステップは、テンプレートで v-for メソッド ループを使用することです。メッセージ リストを出力します
<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>2 番目のステップは、メッセージ配列と特定のメソッドを
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
