vue或css动画实现列表向上无缝滚动

来源：jb51　　时间：2022/4/11 12:27:18　　对本文有异议

本文实例为大家分享了vue或css动画实现列表向上无缝滚动的具体代码，供大家参考，具体内容如下

方法一：vue的实现方法

<div id="publishMain" class="b_list">
?<div id="publishMain1">
? ?<div class="b_item" v-for="(ac,acindex) in activityList" :key="acindex">
? ? ?<!-- 循环的内容 -->
? ?</div>
?</div>
?<div id="publishMain2"></div>
</div>

<script>
export default {
? ? data(){
? ? ? ? return{
? ? ? ? ? ? timer: null,
? ? ? ? ? ? activityList:[]
? ? ? ? }
? ? },
? ? mounted() {
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.rollUp();
? ? ? ? });
? ? },
? ? beforeDestroy() {
? ? ? ? this.timer = null;
? ? ? ? clearInterval(this.timer);
? ? },
?
? ? methods: {
? ? ? ? /*向上轮播*/
? ? ? ? rollUp() {
? ? ? ? let ul1 = document.getElementById("publishMain1");
? ? ? ? let ul2 = document.getElementById("publishMain2");
? ? ? ? let box = document.getElementById("publishMain");
? ? ? ? ul2.innerHTML = ul1.innerHTML;
? ? ? ? box.scrollTop = 0;
? ? ? ? function rollStart() {
? ? ? ? ? ? if (box.scrollTop >= ul1.scrollHeight) {
? ? ? ? ? ? box.scrollTop = 0;
? ? ? ? ? ? } else {
? ? ? ? ? ? box.scrollTop++;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? this.timer = setInterval(rollStart, 50);
? ? }
? }
}
</script>

css

.b_list{
? ?height: 19rem;
? ?overflow: hidden;
}

方法二：纯css动画

html

<div class="b_list">
? <div class="b_scroll">
? ? <div class="b_item" v-for="(ac,acindex) in activityList" :key="acindex">
? ? ? <!-- 循环的内容 -->
? ? </div>
? </div>
</div>

css

@keyframes scrollTop {
? 0% {
? ? -webkit-transform: translate3d(0, 0, 0);
? ? transform: translate3d(0, 0, 0);
? }
? 100% {
? ? -webkit-transform: translate3d(0, -300px, 0);
? ? transform: translate3d(0, -300px, 0);
? }
}
.b_list{
? height: 19rem;
? overflow: hidden;
}
?
.b_scroll{
? ?-webkit-animation: 10s scrollTop linear infinite normal;
? ?animation: 10s scrollTop linear infinite normal;
}