vue或css動畫實現(xiàn)列表向上無縫滾動

更新時間：2022年04月11日 09:33:25 作者：禾小毅

這篇文章主要為大家詳細介紹了vue或css動畫實現(xiàn)列表向上無縫滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue或css動畫實現(xiàn)列表向上無縫滾動的具體代碼，供大家參考，具體內(nèi)容如下

方法一：vue的實現(xiàn)方法

<div id="publishMain" class="b_list">
?<div id="publishMain1">
? ?<div class="b_item" v-for="(ac,acindex) in activityList" :key="acindex">
? ? ?<!-- 循環(huán)的內(nèi)容 -->
? ?</div>
?</div>
?<div id="publishMain2"></div>
</div>

js

<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">
? ? ? <!-- 循環(huán)的內(nèi)容 -->
? ? </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;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: