vue實現(xiàn)列表無縫滾動
本文實例為大家分享了vue實現(xiàn)列表無縫滾動的具體代碼,供大家參考,具體內(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是單個列表組件,也可以替換成li。
css部分代碼
<style scoped> .wrapper { width: 96vw; height: 90vh; position: absolute; left: 2vw; top: 1rem; overflow: hidden; } .contain > div:nth-child(2n) {//這個樣式是我這個項目所需,與無縫滾動無直接關(guān)系,可以忽略 margin-left: 2vw; } .anim { transition: all 0.5s; margin-top: -7vh; } </style>
我的List組件是設(shè)置了float:left的,所以id="con1"的div是沒有高度的
js部分代碼
<script> import List from './List'; export default { name: 'Contain', data () { return { cloudList: [],//數(shù)組用來存放列表數(shù)據(jù) date: '',//最新數(shù)據(jù)更新日期 animate: false, time: 3000,//定時滾動的間隙時間 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(), // 小時 '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; }, // 滾動 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(); //定時器每隔24小時更新一次數(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)移入滾動區(qū)域停止?jié)L動 contain.onmouseenter = function () { clearInterval(_this.setInterval1); var count = 0; // 如果鼠標(biāo)超過十秒不動 就啟動滾動 setInterval2 = setInterval(function () { count++; if (count === 10) { _this.scroll(); _this.setInterval1 = setInterval(_this.scroll, _this.time); } }, 1000); //鼠標(biāo)一動就停止?jié)L動并且計數(shù)count置為0 contain.onmousemove = function () { count = 0; clearInterval(_this.setInterval1); }; }; // 鼠標(biāo)移出滾動區(qū)域 contain.onmouseleave = function () { clearInterval(setInterval2); clearInterval(_this.setInterval1); _this.scroll(); _this.setInterval1 = setInterval(_this.scroll, _this.time); }; } }; </script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue項目搭建以及全家桶的使用詳細(xì)教程(小結(jié))
這篇文章主要介紹了vue項目搭建以及全家桶的使用詳細(xì)教程(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12Vue結(jié)合ElementUI上傳Base64編碼后的圖片實例
這篇文章主要介紹了Vue結(jié)合ElementUI上傳Base64編碼后的圖片實例,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04ElementUI表單驗證validate和validateField的使用及區(qū)別
Element-UI作為前端框架,最常使用到的就是表單驗證,下面這篇文章主要給大家介紹了關(guān)于ElementUI表單驗證validate和validateField的使用及區(qū)別,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02vant-ui框架的一個bug(解決切換后onload不觸發(fā))
這篇文章主要介紹了vant-ui框架的一個bug(解決切換后onload不觸發(fā)),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11VueJs使用Amaze ui調(diào)整列表和內(nèi)容頁面
這篇文章主要介紹了VueJs 填坑日記之使用Amaze ui調(diào)整列表和內(nèi)容頁面,需要的朋友可以參考下2017-11-11基于element-ui封裝可搜索的懶加載tree組件的實現(xiàn)
這篇文章主要介紹了基于element-ui封裝可搜索的懶加載tree組件的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05Vue-router 中hash模式和history模式的區(qū)別
這篇文章主要介紹了Vue-router 中hash模式和history模式的區(qū)別,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07