vue+js怎么實現輪播,滾動公告,銜接效果

這篇文章主要介紹“vue+js怎么實現輪播,滾動公告,銜接效果”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue+js怎么實現輪播,滾動公告,銜接效果”文章能幫助大家解決問題。

分析

• 1、 需要實現上圖的html樹形結構；（紅框）需要展示的盒子；然后里面包裹著一個盒子（綠框）；綠框內有多個需要滾動的數據（黃框）；

• 2、 我們需要看到的內容只會展示在紅框內；所以需要設置超出隱藏overflow:hidden;；這樣多出來的綠框數據就看不到了；

• 3、 現在我們打算用定位的top來控制綠框展示在紅框的位置；這樣就能實現展示我們需要的內容；

• 4、用定時器讓他們動起來；定時器控制top位置--;

• 5、每個內容需要停頓2秒，再繼續滾動；

初步實現

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

//html
<div class="list" :>
...
</div>

//data
listTop:0;

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

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

現在綠框盒子已經滾動起來了。

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

銜接

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

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

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

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

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

完善

上面已經實現了元素滾動效果。

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

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

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

全部代碼

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

//html
<div class="box">
    <div class="list" :>
        <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]);//刪除數組第一個元素，插入到數組后面
                this.listTop=0;//重置top
                clearInterval(t);//取消定時器
                //設置一個2秒后執行的定時器,重新開啟滾動
                setTimeout(()=>{
                    this.setScroll();
                },2000)
            }
        },20)
    }
}

關于“vue+js怎么實現輪播,滾動公告,銜接效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。