您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)vue怎么實(shí)現(xiàn)列表無(wú)縫滾動(dòng)的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
具體內(nèi)容如下
HTML部分代碼
<template> <div id="box" class="wrapper"> <div class="contain" id="con1" ref="con1" :class="{anim:animate==true}"> <List v-for="(item,index) in cloudList" :key="index" :listData="item" :index="index" :date="date" ></List> </div> </div> </template>
List是單個(gè)列表組件,也可以替換成li。
css部分代碼
<style scoped> .wrapper { width: 96vw; height: 90vh; position: absolute; left: 2vw; top: 1rem; overflow: hidden; } .contain > div:nth-child(2n) {//這個(gè)樣式是我這個(gè)項(xiàng)目所需,與無(wú)縫滾動(dòng)無(wú)直接關(guān)系,可以忽略 margin-left: 2vw; } .anim { transition: all 0.5s; margin-top: -7vh; } </style>
我的List組件是設(shè)置了float:left的,所以id="con1"的div是沒(méi)有高度的
js部分代碼
<script> import List from './List'; export default { name: 'Contain', data () { return { cloudList: [],//數(shù)組用來(lái)存放列表數(shù)據(jù) date: '',//最新數(shù)據(jù)更新日期 animate: false, time: 3000,//定時(shí)滾動(dòng)的間隙時(shí)間 setTimeout1: null, setInterval1: null }; }, components: { List }, methods: { // 獲取json數(shù)據(jù)并且更新日期 getCloudListData () { const _this = this; _this.$api.getCloudListData().then(res => { _this.cloudList = res; }); var newDate = new Date(); _this.date = _this.dateFtt('yyyy-MM-dd hh:mm:ss', newDate); }, // 日期格式化 dateFtt (fmt, date) { var o = { 'M+': date.getMonth() + 1, // 月份 'd+': date.getDate(), // 日 'h+': date.getHours(), // 小時(shí) 'm+': date.getMinutes(), // 分 's+': date.getSeconds(), // 秒 'q+': Math.floor((date.getMonth() + 3) / 3), // 季度 S: date.getMilliseconds() // 毫秒 }; if (/(y+)/.test(fmt)) { fmt = fmt.replace( RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length) ); } for (var k in o) { if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace( RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length) ); } } return fmt; }, // 滾動(dòng) scroll () { const _this = this; _this.animate = true; clearTimeout(_this.setTimeout1); _this.setTimeout1 = setTimeout(() => { var parent = document.getElementById('con1'); var first = document.getElementById('con1').children[0]; var second = document.getElementById('con1').children[1]; parent.removeChild(first); parent.removeChild(second); parent.appendChild(first); parent.appendChild(second); _this.animate = false; }, 500); } }, created () { const _this = this; _this.getCloudListData(); //定時(shí)器每隔24小時(shí)更新一次數(shù)據(jù) setInterval(() => { _this.getCloudListData(); }, 24 * 60 * 60 * 1000); }, mounted () { const _this = this; var contain = document.getElementById('box'); _this.setInterval1 = setInterval(_this.scroll, _this.time); var setInterval2 = null; // 鼠標(biāo)移入滾動(dòng)區(qū)域停止?jié)L動(dòng) contain.onmouseenter = function () { clearInterval(_this.setInterval1); var count = 0; // 如果鼠標(biāo)超過(guò)十秒不動(dòng) 就啟動(dòng)滾動(dòng) setInterval2 = setInterval(function () { count++; if (count === 10) { _this.scroll(); _this.setInterval1 = setInterval(_this.scroll, _this.time); } }, 1000); //鼠標(biāo)一動(dòng)就停止?jié)L動(dòng)并且計(jì)數(shù)count置為0 contain.onmousemove = function () { count = 0; clearInterval(_this.setInterval1); }; }; // 鼠標(biāo)移出滾動(dòng)區(qū)域 contain.onmouseleave = function () { clearInterval(setInterval2); clearInterval(_this.setInterval1); _this.scroll(); _this.setInterval1 = setInterval(_this.scroll, _this.time); }; } }; </script>
感謝各位的閱讀!關(guān)于“vue怎么實(shí)現(xiàn)列表無(wú)縫滾動(dòng)”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。