vue或css動畫實現(xiàn)列表向上無縫滾動
更新時間：2022年04月11日 09:33:25 作者：禾小毅
這篇文章主要為大家詳細(xì)介紹了vue或css動畫實現(xiàn)列表向上無縫滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)搜索小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
在現(xiàn)代前端開發(fā)的世界中,Vue 3 已然成為了一個備受喜愛的框架,而 Vite 作為一個新興的構(gòu)建工具,以其極高的效率和簡捷的配置方式席卷了開發(fā)者圈,本文我們將一步一步展示如何使用 Vite 構(gòu)建一個 Vue 3 項目,從創(chuàng)建項目到最后的構(gòu)建階段,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了vue.js模擬日歷插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
本篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了Vue源碼探究之虛擬節(jié)點的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
vue中img src 動態(tài)加載本地json的圖片路徑寫法
這篇文章主要介紹了vue中的img src 動態(tài)加載本地json的圖片路徑寫法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
vue3+el-table封裝示例詳解(編輯、刪除、查看詳情按鈕一起封裝)
在Vue3中,利用Element?Plus?UI庫封裝表格組件,實現(xiàn)編輯、刪除和查看詳情的功能,通過定義tableData和tableDataHeader來管理表格數(shù)據(jù)和表頭,其中tableData通常從后端獲取,而tableHeader可根據(jù)具體需求自定義,感興趣的朋友跟隨小編一起看看吧2024-09-09
KeepAlive 是 vue 中的內(nèi)置組件，當(dāng)多個組件動態(tài)切換時可以對實例狀態(tài)進行緩存，本文就來詳細(xì)的介紹一下Vue中KeepAlive內(nèi)置緩存使用，感興趣的可以了解一下2023-10-10
vue?elementui?大文件進度條下載功能實現(xiàn)
本文介紹了如何使用下載進度條來展示下載進度的方法,并展示了相關(guān)的效果圖,結(jié)合實例代碼介紹了vue?elementui?大文件進度條下載的方法,感興趣的朋友一起看看吧2025-01-01
Vue路由模式中的hash和history模式詳細(xì)介紹
VUE分為兩種路由模式分別是hash（哈希）和history，他們的區(qū)別是hash模式不會包含在http請求中，并且不會重新加載頁面，而使用history模式的話，如果前端的url和后端發(fā)起請求的url不一致的話，會報404錯誤，所以使用history模式的話我們需要和后端進行配合2022-09-09