vue+j簡單的實現(xiàn)輪播效果,滾動公告,銜接

更新時間：2022年06月09日 10:15:44 作者：??絮????

這篇文章主要介紹了vue+j簡單的實現(xiàn)輪播效果,滾動公告,銜接,文章圍繞主題的相關(guān)資料展開詳細的內(nèi)容具有一定的參考價值，需要的小伙伴可以參考一下

分析

1、需要實現(xiàn)上圖的html樹形結(jié)構(gòu)；（紅框）需要展示的盒子；然后里面包裹著一個盒子（綠框）；綠框內(nèi)有多個需要滾動的數(shù)據(jù)（黃框）；
2、我們需要看到的內(nèi)容只會展示在紅框內(nèi)；所以需要設(shè)置超出隱藏overflow:hidden;；這樣多出來的綠框數(shù)據(jù)就看不到了；
3、現(xiàn)在我們打算用定位的top來控制綠框展示在紅框的位置；這樣就能實現(xiàn)展示我們需要的內(nèi)容；
4、用定時器讓他們動起來；定時器控制top位置--;
5、每個內(nèi)容需要停頓2秒，再繼續(xù)滾動；

初步實現(xiàn)

先聲明一個變量，用于控制綠框的top，綁定到綠框：

//html
<div class="list" :style="{top:listTop+'px'}">
...
</div>

//data
listTop:0;

這里我希望是向上滾動，所以需要控制listTop--;

setInterval(()=>{
    this.listTop-=1;
},20)

現(xiàn)在綠框盒子已經(jīng)滾動起來了。

但是我們需要把上下銜接起來，不至于到最后停止?jié)L動，或者突兀的直接跳到了頂部。

銜接

為了解決銜接，我們引入一個思路：

在滾動到第二個元素的時候，把第一個元素插入到元素的最后，然后把盒子的top重置為0

這樣的話，我們只會滾動前面的兩個元素，然后操作元素的位置，把第一個插入到最后；因為我是用vue遍歷數(shù)組的方式實現(xiàn)的，所以我只需要操作數(shù)組，同理原生js就是操作dom了。

//data
list:[1111,2222,3333],
listTop：0,

//methods  
//假設(shè)我設(shè)置了每個元素的高度為40px;
setInterval(()=>{
    this.listTop-=1;
    if(this.listTop===40){
        this.list.push(this.list.splice(0,1)[0]);//刪除數(shù)組第一個元素，插入到數(shù)組后面
        this.listTop=0;//重置top
    }
},20)

完善

上面已經(jīng)實現(xiàn)了元素滾動效果。

但是我們現(xiàn)在需要每個元素展示2秒，再繼續(xù)切換。這樣控制定時器的執(zhí)行時間就可以了。

//data
list:[1111,2222,3333],
listTop：0,

//methods  
//假設(shè)我設(shè)置了每個元素的高度為40px;
setScroll(){
    var t = setInterval(()=>{
        this.listTop-=1;
        if(this.listTop===-40){
            this.list.push(this.list.splice(0,1)[0]);//刪除數(shù)組第一個元素，插入到數(shù)組后面
            this.listTop=0;//重置top
            clearInterval(t);//取消定時器
            //設(shè)置一個2秒后執(zhí)行的定時器,重新開啟滾動
            setTimeout(()=>{
                this.setScroll();
            },2000)
        }
    },20)
}

全部代碼

貼上全部代碼，以下為vue語法：

//html
<div class="box">
    <div class="list" :style="{top:listTop+'px'}">
        <div v-for="(item,index) in list" :key="index">
        {{item}}
        </div>
    </div>
</div>

//css
.box{
    height:40px;
    line-height:40px;
    overflow:hidden;
    position:relative;
}
.list{
    position:absolute;
    left:0;
}

//js
data(){
    return {
        list:[1111,2222,3333],
        listTop：0,
    }
},
mounted(){
    this.setScroll();
},
methods:{
    setScroll(){
        var t = setInterval(()=>{
            this.listTop-=1;
            if(this.listTop===-40){
                this.list.push(this.list.splice(0,1)[0]);//刪除數(shù)組第一個元素，插入到數(shù)組后面
                this.listTop=0;//重置top
                clearInterval(t);//取消定時器
                //設(shè)置一個2秒后執(zhí)行的定時器,重新開啟滾動
                setTimeout(()=>{
                    this.setScroll();
                },2000)
            }
        },20)
    }
}

到此這篇關(guān)于vue+j簡單的實現(xiàn)輪播效果,滾動公告,銜接的文章就介紹到這了,更多相關(guān) vue銜接功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: