快捷導(dǎo)航

vue+j簡(jiǎn)單的實(shí)現(xiàn)輪播效果,滾動(dòng)公告,銜接

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

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

分析

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

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

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

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

//data
listTop:0;

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

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

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

但是我們需要把上下銜接起來(lái)，不至于到最后停止?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í)器,重新開(kāi)啟滾動(dòng)
            setTimeout(()=>{
                this.setScroll();
            },2000)
        }
    },20)
}

全部代碼

貼上全部代碼，以下為vue語(yǔ)法：

//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ù)組第一個(gè)元素，插入到數(shù)組后面
                this.listTop=0;//重置top
                clearInterval(t);//取消定時(shí)器
                //設(shè)置一個(gè)2秒后執(zhí)行的定時(shí)器,重新開(kāi)啟滾動(dòng)
                setTimeout(()=>{
                    this.setScroll();
                },2000)
            }
        },20)
    }
}

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

您可能感興趣的文章: