vue實現列表無縫循環滾動

3403771864 發布于2022-09-14 22:32 / 2432人閱讀

　　vue如何為大家展示列表無縫循環滾動，以下就是具體代碼內容如下：

　　功能介紹：

　　在PC端、大數據、官網、后臺管理平臺開發項目中，時常會要求展示這種列表循環滾動。

　　大致需求：

　　1、列表內容可以循環展示；

　　2、每條內容展示時間間距幾秒；

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

　　整體思路：

　　1、使用兩個定時器嵌套實現；

　　2、需要兩個相同容器存放同樣內容，實現無縫銜接效果；

　　效果展示：

　　<!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踩坑：

　　發現這種方法實現的定時輪播，有一陣沒訪問頁面，會出現卡停的情況，采用下面的解決方法：

　　<script>
　　new Vue({
　　el: '#app',
　　data: {
　　tableHei: 'auto',
　　timer: null,
　　size: 0,
　　stopSign: true, // 判斷定時器是否停止標識
　　stepTime: null, // 改為全局定時器
　　},
　　mounted() {
　　const that = this;
　　// 增加瀏覽器激活狀態判斷。非激活狀態為onblur
　　window.onfocus = function(e) {
　　const tableBox = that.$refs.tableBox;
　　const sT = tableBox.scrollTop;
　　console.log("激活狀態！")
　　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;
　　// 改為全局定時器，且在調用前先進行清空
　　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 () {
　　// 修改定時器結束判斷條件
　　if(tableBox.scrollTop >= tableInner.scrollHeight) {
　　tableBox.scrollTop = 0;
　　}
　　that.stepScroll();
　　}, 2000);
　　},
　　}
　　})
　　</script>

云服務器 GPU云服務器無縫滾動水平無縫滾動文字無縫滾動無縫循環

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127719.html

vue實現消息的無縫滾動效果（完善版）

摘要：在昨天發布完文章之后又整理一下，發現有幾處需要改進的地方，今天就及時更新一下，也算是激勵自己要保持這種積極的好習慣項目環境，請自行配置好相應的，環境及路由，這里主要介紹實現的方法第一步在模板中使用方法循環出消息列表馬云雷軍王勤因為在消息在昨天發布完文章之后又整理一下，發現有幾處需要改進的地方，今天就及時更新一下，也算是激勵自己要保持這種積極的好習慣項目環境vue-cli ，請自行配...

luckyyulin 2019-08-21 17:54 評論0 收藏0
js實現列表自動滾動循環播放

　　列表自動滾動循環播放不要太爽，下面看看具體代碼：　　1.實現效果圖　　鼠標移入，暫停滾動；鼠標移出，繼續滾動；　　2.原理　　第一：要實現無縫銜接，在原有ul后面還要有一個一樣內容的ul；　　第二：在最外層div為可視區域，設overflow：hidden；　　第三：2個ul的高度 > 外層可視div高度，才能滾動；　　3.實現代碼　　html：　　 　...

3403771864 2022-09-12 19:55 評論0 收藏0
vue無縫滾動的插件開發填坑分享

摘要：寫插件的初衷項目經常需要無縫滾動效果，當時寫的時候用用這個老插件，相對不上很好用。后來轉向在沒有找到好的無縫滾動插件，除了配置可以實現但是相對來說太重了，于是自己造了個輪子。寫插件的初衷 1.項目經常需要無縫滾動效果，當時寫jq的時候用用msClass這個老插件，相對不上很好用。2.后來轉向vue在vue-awesome沒有找到好的無縫滾動插件，除了配置swiper可以實現但是相對來...

岳光 2019-08-22 14:04 評論0 收藏0
jquery特效：無縫向上循環滾動列表

摘要：效果呈現整個列表間隔設定的時間向上移動一個的高度結構設置時，注意高度是顯示多少個如的高度是，顯示個，高度則是實現思路獲得下第一個元素的高度，對它的或進行一個從有到無的動畫變化，代碼如下或者改成動畫結束后，把它插到最后，形成無縫效果呈現整個列表間隔設定的時間向上移動一個item的高度 html結構： title1 title2 ...

hot_pot_Leo 2019-08-21 10:19 評論0 收藏0
vue-music（1）音樂播發器項目開發記錄

摘要：在中新建組件許文瑞正在吃屎。。。。在中添加如下代碼三歌手組件開發歌手首頁開發數據獲取數據獲取依舊從音樂官網獲取歌手接口創建我們和以前一樣，利用我們封裝的等發放，來請求我們的接口，返回給。 Vue-Music 跟學一個網課老師做的仿原生音樂APP跟學的筆記，記錄點滴，也希望對學習vue初學小伙伴有點幫助 showImg(https://segmentfault.com/img/remot...

happen 2019-08-23 11:29 評論0 收藏0