vue或css動(dòng)畫實(shí)現(xiàn)列表向上無(wú)縫滾動(dòng)
更新時(shí)間：2022年04月11日 09:33:25 作者：禾小毅
這篇文章主要為大家詳細(xì)介紹了vue或css動(dòng)畫實(shí)現(xiàn)列表向上無(wú)縫滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue或css動(dòng)畫實(shí)現(xiàn)列表向上無(wú)縫滾動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下
方法一：vue的實(shí)現(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動(dòng)畫
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;
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue實(shí)現(xiàn)網(wǎng)頁(yè)截圖和截屏功能
網(wǎng)頁(yè)截圖與截屏功能在許多Web應(yīng)用程序中都非常有用,Vue.js作為一個(gè)流行的JavaScript框架,提供了許多工具和庫(kù)來(lái)簡(jiǎn)化網(wǎng)頁(yè)截圖和截屏的實(shí)現(xiàn),本文將介紹如何使用Vue來(lái)實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)截圖和截屏功能的示例,包括使用html2canvas庫(kù)和vue-cropper庫(kù),需要的朋友可以參考下2023-10-10
vue的無(wú)縫滾動(dòng)組件vue-seamless-scroll實(shí)例
本篇文章主要給大家講解了vue的無(wú)縫滾動(dòng)組件vue-seamless-scroll的用法，需要的朋友參考學(xué)習(xí)下吧。2017-12-12
vue與原生app的對(duì)接交互的方法(混合開發(fā))
vue開發(fā)h5項(xiàng)目特別是移動(dòng)端的項(xiàng)目，很多都是打包后掛載在原生APP上的，這篇文章主要介紹了vue與原生app的對(duì)接交互的方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-11
本篇文章主要介紹了vue使用Axios做ajax請(qǐng)求詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
單頁(yè)面vue引入百度統(tǒng)計(jì)的使用方法示例詳解
在網(wǎng)上各種找不到vue項(xiàng)目加入百度統(tǒng)計(jì)的代碼與實(shí)現(xiàn)，自己探索出了一套加入百度統(tǒng)計(jì)的辦法，下面這篇文章主要給大家介紹了關(guān)于單頁(yè)面vue引入百度統(tǒng)計(jì)的使用方法，需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue?innerHTML?綁定單擊事件不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue.js動(dòng)態(tài)修改background-image問(wèn)題
這篇文章主要介紹了vue.js動(dòng)態(tài)修改background-image問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
本篇文章主要介紹了Vue過(guò)濾器的用法和自定義過(guò)濾器，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
解決echarts數(shù)據(jù)二次渲染不成功的問(wèn)題
這篇文章主要介紹了解決echarts數(shù)據(jù)二次渲染不成功的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
本文主要介紹了vue3插件json2ts的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07