資訊專欄INFORMATION COLUMN
vue如何為大家展示列表無縫循環(huán)滾動，以下就是具體代碼內(nèi)容如下：
功能介紹：
在PC端、大數(shù)據(jù)、官網(wǎng)、后臺管理平臺開發(fā)項(xiàng)目中，時常會要求展示這種列表循環(huán)滾動。
大致需求：
1、列表內(nèi)容可以循環(huán)展示；
2、每條內(nèi)容展示時間間距幾秒；
3、可以形成走馬燈樣式效果；
整體思路：
1、使用兩個定時器嵌套實(shí)現(xiàn)；
2、需要兩個相同容器存放同樣內(nèi)容，實(shí)現(xiàn)無縫銜接效果；
效果展示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/[email protected]/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)這種方法實(shí)現(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>文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/127719.html
摘要：在昨天發(fā)布完文章之后又整理一下，發(fā)現(xiàn)有幾處需要改進(jìn)的地方，今天就及時更新一下，也算是激勵自己要保持這種積極的好習(xí)慣項(xiàng)目環(huán)境，請自行配置好相應(yīng)的，環(huán)境及路由，這里主要介紹實(shí)現(xiàn)的方法第一步在模板中使用方法循環(huán)出消息列表馬云雷軍王勤因?yàn)樵谙? 在昨天發(fā)布完文章之后又整理一下，發(fā)現(xiàn)有幾處需要改進(jìn)的地方，今天就及時更新一下，也算是激勵自己要保持這種積極的好習(xí)慣 項(xiàng)目環(huán)境vue-cli ，請自行配...
列表自動滾動循環(huán)播放不要太爽，下面看看具體代碼： 1.實(shí)現(xiàn)效果圖 鼠標(biāo)移入，暫停滾動； 鼠標(biāo)移出，繼續(xù)滾動； 2.原理 第一：要實(shí)現(xiàn)無縫銜接，在原有ul后面還要有一個一樣內(nèi)容的ul； 第二：在最外層div為可視區(qū)域，設(shè)overflow：hidden； 第三：2個ul的高度 > 外層可視div高度，才能滾動； 3.實(shí)現(xiàn)代碼 html： <!--vue--> ...
摘要：寫插件的初衷項(xiàng)目經(jīng)常需要無縫滾動效果，當(dāng)時寫的時候用用這個老插件，相對不上很好用。后來轉(zhuǎn)向在沒有找到好的無縫滾動插件，除了配置可以實(shí)現(xiàn)但是相對來說太重了，于是自己造了個輪子。 寫插件的初衷 1.項(xiàng)目經(jīng)常需要無縫滾動效果，當(dāng)時寫jq的時候用用msClass這個老插件，相對不上很好用。2.后來轉(zhuǎn)向vue在vue-awesome沒有找到好的無縫滾動插件，除了配置swiper可以實(shí)現(xiàn)但是相對來...
摘要：效果呈現(xiàn)整個列表間隔設(shè)定的時間向上移動一個的高度結(jié)構(gòu)設(shè)置時，注意高度是顯示多少個如的高度是，顯示個，高度則是實(shí)現(xiàn)思路獲得下第一個元素的高度，對它的或進(jìn)行一個從有到無的動畫變化，代碼如下或者改成動畫結(jié)束后，把它插到最后，形成無縫 效果呈現(xiàn) 整個列表間隔設(shè)定的時間向上移動一個item的高度 html結(jié)構(gòu)： title1 title2 ...
摘要：在中新建組件許文瑞正在吃屎。。。。在中添加如下代碼三歌手組件開發(fā)歌手首頁開發(fā)數(shù)據(jù)獲取數(shù)據(jù)獲取依舊從音樂官網(wǎng)獲取歌手接口創(chuàng)建我們和以前一樣，利用我們封裝的等發(fā)放，來請求我們的接口，返回給。 Vue-Music 跟學(xué)一個網(wǎng)課老師做的仿原生音樂APP跟學(xué)的筆記，記錄點(diǎn)滴，也希望對學(xué)習(xí)vue初學(xué)小伙伴有點(diǎn)幫助 showImg(https://segmentfault.com/img/remot...
閱讀 566·2023-03-27 18:33
閱讀 755·2023-03-26 17:27
閱讀 655·2023-03-26 17:14
閱讀 608·2023-03-17 21:13
閱讀 541·2023-03-17 08:28
閱讀 1829·2023-02-27 22:32
閱讀 1324·2023-02-27 22:27
閱讀 2207·2023-01-20 08:28
