vue實(shí)現(xiàn)列表無縫循環(huán)滾動(dòng)

3403771864 發(fā)布于2022-09-14 22:32 / 2459人閱讀

　　vue如何為大家展示列表無縫循環(huán)滾動(dòng)，以下就是具體代碼內(nèi)容如下：

　　功能介紹：

　　在PC端、大數(shù)據(jù)、官網(wǎng)、后臺(tái)管理平臺(tái)開發(fā)項(xiàng)目中，時(shí)常會(huì)要求展示這種列表循環(huán)滾動(dòng)。

　　大致需求：

　　1、列表內(nèi)容可以循環(huán)展示；

　　2、每條內(nèi)容展示時(shí)間間距幾秒；

　　3、可以形成走馬燈樣式效果；

　　整體思路：

　　1、使用兩個(gè)定時(shí)器嵌套實(shí)現(xiàn)；

　　2、需要兩個(gè)相同容器存放同樣內(nèi)容，實(shí)現(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>
　　/* 滾動(dòng)表格最外層 */
　　.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">入駐時(shí)間</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)的定時(shí)輪播，有一陣沒訪問頁面，會(huì)出現(xiàn)卡停的情況，采用下面的解決方法：

　　<script>
　　new Vue({
　　el: '#app',
　　data: {
　　tableHei: 'auto',
　　timer: null,
　　size: 0,
　　stopSign: true, // 判斷定時(shí)器是否停止標(biāo)識(shí)
　　stepTime: null, // 改為全局定時(shí)器
　　},
　　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;
　　// 改為全局定時(shí)器，且在調(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 () {
　　// 修改定時(shí)器結(jié)束判斷條件
　　if(tableBox.scrollTop >= tableInner.scrollHeight) {
　　tableBox.scrollTop = 0;
　　}
　　that.stepScroll();
　　}, 2000);
　　},
　　}
　　})
　　</script>