vue+js怎么實(shí)現(xiàn)輪播,滾動(dòng)公告,銜接效果

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

分析

• 1、 需要實(shí)現(xiàn)上圖的html樹形結(jié)構(gòu)；（紅框）需要展示的盒子；然后里面包裹著一個(gè)盒子（綠框）；綠框內(nèi)有多個(gè)需要滾動(dòng)的數(shù)據(jù)（黃框）；

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

• 3、 現(xiàn)在我們打算用定位的top來控制綠框展示在紅框的位置；這樣就能實(shí)現(xiàn)展示我們需要的內(nèi)容；

• 4、用定時(shí)器讓他們動(dòng)起來；定時(shí)器控制top位置--;

• 5、每個(gè)內(nèi)容需要停頓2秒，再繼續(xù)滾動(dòng)；

初步實(shí)現(xiàn)

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

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

//data
listTop:0;

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

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

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

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

銜接

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

在滾動(dòng)到第二個(gè)元素的時(shí)候，把第一個(gè)元素插入到元素的最后，然后把盒子的top重置為0

這樣的話，我們只會(huì)滾動(dòng)前面的兩個(gè)元素，然后操作元素的位置，把第一個(gè)插入到最后；因?yàn)槲沂怯胿ue遍歷數(shù)組的方式實(shí)現(xiàn)的，所以我只需要操作數(shù)組，同理原生js就是操作dom了。

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

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

完善

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

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

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

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

關(guān)于“vue+js怎么實(shí)現(xiàn)輪播,滾動(dòng)公告,銜接效果”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。