vue實現(xiàn)列表無縫循環(huán)滾動
更新時間：2022年07月14日 09:22:34 作者：iatkotworld
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)列表無縫循環(huán)滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)列表無縫循環(huán)滾動的具體代碼，供大家參考，具體內(nèi)容如下
功能介紹：
在PC端網(wǎng)頁，包括大數(shù)據(jù)、官網(wǎng)、后臺管理平臺開發(fā)中，可能會用到這種列表循環(huán)滾動的展示。
大致需求：
1、列表可以使用數(shù)組循環(huán)遍歷；
2、每隔幾秒中列表數(shù)據(jù)向上滾動一定距離，展示下一條數(shù)據(jù)；
3、滾動到最后一條數(shù)據(jù)時重新顯示第一條開始的數(shù)據(jù)（類似走馬燈、banner圖的循環(huán)效果）；
整體思路：
1、使用兩個定時器嵌套實現(xiàn)；
2、需要兩個相同容器存放同樣內(nèi)容，實現(xiàn)無縫銜接效果；
效果展示：
完整代碼：
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
?? ??? ?<style>
?? ??? ??? ?/* 滾動表格最外層 */
?? ??? ??? ?.tableoOut {
?? ??? ??? ??? ?margin: 100px auto;
?? ??? ??? ? ? ?width: 500px;
?? ??? ??? ? ? ?height: 400px;
?? ??? ??? ??? ?background: pink;
?? ??? ??? ? ? ?overflow: hidden;
?? ??? ??? ? ? ?display: flex;
?? ??? ??? ? ? ?align-items: center;
?? ??? ??? ? ? ?justify-content: center;
?? ??? ??? ? ? ?flex-direction: column;
?? ??? ??? ?}
?? ??? ??? ?.tableBox {
?? ??? ??? ? ? ?width: 100%;
?? ??? ??? ??? ?background: #000;
?? ??? ??? ? ? ?overflow: hidden
?? ??? ??? ?}
?? ??? ??? ?.tableTit {
?? ??? ??? ??? ?background: #000;
?? ??? ??? ? ? ?width: 100%;
?? ??? ??? ? ? ?height: 40px;
?? ??? ??? ? ? ?color: #858A84;
?? ??? ??? ? ? ?text-align: center;
?? ??? ??? ? ? ?display: flex;
?? ??? ??? ? ? ?justify-content: center;
?? ??? ??? ? ? ?align-items: center;
?? ??? ??? ?}
?? ??? ??? ?.tableInner {
?? ??? ??? ? ? ?height: auto;
?? ??? ??? ?}
?? ??? ??? ?.box {
?? ??? ??? ? ? ?width: 100%;
?? ??? ??? ? ? ?height: 50px;
?? ??? ??? ? ? ?display: flex;
?? ??? ??? ? ? ?justify-content: center;
?? ??? ??? ? ? ?align-items: center;
?? ??? ??? ? ? ?color: #fff;
?? ??? ??? ?}
?? ??? ??? ?.box .time {
?? ??? ??? ? ? ?color: #858A84;
?? ??? ??? ?}
?? ??? ??? ?.tableoOut .addr, .tableoOut .time, .tableoOut .name {
?? ??? ??? ? ? ?box-sizing: border-box;
?? ??? ??? ? ? ?padding: 0 5px;text-align: center;
?? ??? ??? ? ? ?overflow: hidden;
?? ??? ??? ??? ?white-space: nowrap;
?? ??? ??? ??? ?text-overflow: ellipsis;
?? ??? ??? ?}
?? ??? ??? ?.tableoOut .addr {
?? ??? ??? ? ? ?width: calc(100% - 200px);
?? ??? ??? ? ? ?flex-shrink: 0;
?? ??? ??? ?}
?? ??? ??? ?.tableoOut .name, .tableoOut .time {
?? ??? ??? ? ? ?width: 100px;
?? ??? ??? ? ? ?flex-shrink: 0;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div id="app">
?? ??? ??? ?<div class="tableoOut" ref="tableoOut">
?? ??? ??? ??? ?<div class="tableTit">
?? ??? ??? ??? ??? ?<div class="name">姓名</div>
?? ??? ??? ??? ??? ?<div class="addr">地址</div>
?? ??? ??? ??? ??? ?<div class="time">入駐時間</div>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div class="tableBox" ref="tableBox"
?? ??? ??? ??? ??? ?:style="{height: tableHei}">
?? ??? ??? ??? ??? ?<div class="tableInner" ref="tableInner">
?? ??? ??? ??? ??? ??? ?<div class="box" v-for="item in 7" :key="item">
?? ??? ??? ??? ??? ??? ??? ?<div class="name">{{item}}</div>
?? ??? ??? ??? ??? ??? ??? ?<div class="addr">山東省山東省山東省山東省山東省山東省山東省山東省
?? ??? ??? ??? ??? ??? ??? ?山東省山東省山東省山東省山東省</div>
?? ??? ??? ??? ??? ??? ??? ?<div class="time">2022-05-26</div>
?? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?<div class="tableInner" v-if="size < 7">
?? ??? ??? ??? ??? ??? ?<div class="box" v-for="item in 7" :key="item">
?? ??? ??? ??? ??? ??? ??? ?<div class="name">{{item}}</div>
?? ??? ??? ??? ??? ??? ??? ?<div class="addr">山東省山東省山東省山東省山東省山東省山東省山東省
?? ??? ??? ??? ??? ??? ??? ?山東省山東省山東省山東省山東省</div>
?? ??? ??? ??? ??? ??? ??? ?<div class="time">2022-05-26</div>
?? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</body>
?? ?<script>
?? ??? ?new Vue({
?? ??? ??? ?el: '#app',
?? ??? ??? ?data: {
?? ??? ??? ??? ?tableHei: 'auto',
?? ??? ??? ??? ?timer: null,
?? ??? ??? ??? ?size: 0
?? ??? ??? ?},
?? ??? ??? ?mounted() {
?? ??? ??? ??? ?this.getTable();
?? ??? ??? ?},
?? ??? ??? ?methods: {
?? ??? ??? ??? ?getTable() {
?? ??? ??? ??? ??? ?const outHei = this.$refs.tableoOut.clientHeight - 60;
?? ??? ??? ??? ??? ?this.size = Math.floor(outHei / 50);
?? ??? ??? ??? ??? ?this.tableHei = this.size * 50 + 'px';
?? ??? ??? ??? ??? ?this.scrolls();
?? ??? ??? ??? ?},
?? ??? ??? ??? ?stepScroll() {
?? ??? ??? ??? ??? ?const step = 50;
?? ??? ??? ??? ??? ?let num = 0;
?? ??? ??? ??? ??? ?const tableBox = this.$refs.tableBox;
?? ??? ??? ??? ??? ?const stepTime = setInterval(function () {
?? ??? ??? ??? ??? ??? ?num += 2;
?? ??? ??? ??? ??? ??? ?if (num > step) {
?? ??? ??? ??? ??? ??? ??? ?num = 0;
?? ??? ??? ??? ??? ??? ??? ?clearInterval(stepTime);
?? ??? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ??? ?tableBox.scrollTop += 2;
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}, 20);
?? ??? ??? ??? ?},
?? ??? ??? ??? ?scrolls() {
?? ??? ??? ??? ??? ?const that = this;
?? ??? ??? ??? ??? ?const tableBox = this.$refs.tableBox;
?? ??? ??? ??? ??? ?const tableInner = this.$refs.tableInner;
?? ??? ??? ??? ??? ?clearInterval(this.timer);
?? ??? ??? ??? ??? ?this.timer = setInterval(function () {
?? ??? ??? ??? ??? ??? ?if(tableBox.scrollTop === tableInner.scrollHeight) {
?? ??? ??? ??? ??? ??? ??? ?tableBox.scrollTop = 0;
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?that.stepScroll();
?? ??? ??? ??? ??? ?}, 2000);
?? ??? ??? ??? ?},
?? ??? ??? ?}
?? ??? ?})
?? ?</script>
</html>setInterval踩坑：
發(fā)現(xiàn)這種方法實現(xiàn)的定時輪播，有一陣沒訪問頁面，會出現(xiàn)卡停的情況，采用下面的解決方法：
<script>
?? ?new Vue({
?? ??? ?el: '#app',
?? ??? ?data: {
?? ??? ??? ?tableHei: 'auto',
?? ??? ??? ?timer: null,
?? ??? ??? ?size: 0,
?? ??? ??? ?stopSign: true, // 判斷定時器是否停止標(biāo)識
?? ??? ??? ?stepTime: null, // 改為全局定時器
?? ??? ?},
?? ??? ?mounted() {
?? ??? ??? ?const that = this;
?? ??? ??? ?// 增加瀏覽器激活狀態(tài)判斷。非激活狀態(tài)為onblur
?? ??? ??? ?window.onfocus = function(e) {
?? ??? ??? ??? ?const tableBox = that.$refs.tableBox;
?? ??? ??? ??? ?const sT = tableBox.scrollTop;
?? ??? ??? ??? ?console.log("激活狀態(tài)！")
?? ??? ??? ??? ?if (!that.stopSign) {
?? ??? ??? ??? ??? ?tableBox.scrollTop = Math.round(sT / 50) * 50;
?? ??? ??? ??? ??? ?clearInterval(that.stepTime);
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?this.getTable();
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?getTable() {
?? ??? ??? ??? ?const outHei = this.$refs.tableoOut.clientHeight - 60;
?? ??? ??? ??? ?this.size = Math.floor(outHei / 50);
?? ??? ??? ??? ?this.tableHei = this.size * 50 + 'px';
?? ??? ??? ??? ?this.scrolls();
?? ??? ??? ?},
?? ??? ??? ?stepScroll() {
?? ??? ??? ??? ?const that = this;
?? ??? ??? ??? ?const step = 50;
?? ??? ??? ??? ?let num = 0;
?? ??? ??? ??? ?const tableBox = this.$refs.tableBox;
?? ??? ??? ??? ?// 改為全局定時器，且在調(diào)用前先進(jìn)行清空
?? ??? ??? ??? ?clearInterval(this.stepTime);
?? ??? ??? ??? ?this.stepTime = setInterval(function () {
?? ??? ??? ??? ??? ?that.stopSign = false;
?? ??? ??? ??? ??? ?num += 2;
?? ??? ??? ??? ??? ?if (num > step) {
?? ??? ??? ??? ??? ??? ?num = 0;
?? ??? ??? ??? ??? ??? ?clearInterval(that.stepTime);
?? ??? ??? ??? ??? ??? ?that.stopSign = true;
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?tableBox.scrollTop += 2;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}, 1000 / 60);
?? ??? ??? ?},
?? ??? ??? ?scrolls() {
?? ??? ??? ??? ?const that = this;
?? ??? ??? ??? ?const tableBox = this.$refs.tableBox;
?? ??? ??? ??? ?const tableInner = this.$refs.tableInner;
?? ??? ??? ??? ?clearInterval(this.timer);
?? ??? ??? ??? ?this.timer = setInterval(function () {
?? ??? ??? ??? ??? ?// 修改定時器結(jié)束判斷條件
?? ??? ??? ??? ??? ?if(tableBox.scrollTop >= tableInner.scrollHeight) {
?? ??? ??? ??? ??? ??? ?tableBox.scrollTop = 0;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?that.stepScroll();
?? ??? ??? ??? ?}, 2000);
?? ??? ??? ?},
?? ??? ?}
?? ?})
</script>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue-router使用next()跳轉(zhuǎn)到指定路徑時會無限循環(huán)問題
- vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式
- vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄
- vue?循環(huán)動態(tài)設(shè)置ref并獲取$refs方式
- vue如何在for循環(huán)中設(shè)置ref并獲取$refs
- vue中v-model如何綁定多循環(huán)表達(dá)式實戰(zhàn)案例
- Vue中實現(xiàn)v-for循環(huán)遍歷圖片的方法
- vue中的循環(huán)遍歷對象、數(shù)組和字符串
- vue中forEach循環(huán)的使用講解
- Vue3基礎(chǔ)篇之常用的循環(huán)示例詳解
相關(guān)文章
這篇文章主要介紹了Vue.use()的用法和install的用法解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
使用vue.js實現(xiàn)聯(lián)動效果的示例代碼
本篇文章主要介紹了使用vue.js實現(xiàn)聯(lián)動效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
本篇文章主要介紹了詳解Vue使用命令行搭建單頁面應(yīng)用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解
這篇文章主要介紹了vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue 父組件給子組件傳值，子組件給父組件傳值,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue3中的執(zhí)行流程思路分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue.set向?qū)ο罄镌黾佣鄬訑?shù)組屬性不生效問題及解決
這篇文章主要介紹了vue.set向?qū)ο罄镌黾佣鄬訑?shù)組屬性不生效問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
elementui?el-upload一次請求上傳多個文件的實現(xiàn)
使用ElementUI?Upload的時候發(fā)現(xiàn)如果是默認(rèn)方案,上傳多張圖片并不是真正的一次上傳多張,本文就來介紹一下elementui?el-upload一次請求上傳多個文件的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了vue儲存storage時含有布爾值的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-06-06
這篇文章主要介紹了Vue?動態(tài)路由的實現(xiàn)，動態(tài)路由是一個常用的功能，根據(jù)后臺返回的路由json表，前端動態(tài)顯示可跳轉(zhuǎn)的路由項，本文主要實現(xiàn)的是后臺傳遞路由，前端拿到并生成側(cè)邊欄的一個形勢，需要的朋友可以參考一下2022-06-06