vue实现列表向上滚动更新(vue实现列表无缝滚动)
类别:编程学习 浏览量:2115
时间:2021-10-20 08:51:56 vue实现列表向上滚动更新
vue实现列表无缝滚动本文实例为大家分享了vue实现列表无缝滚动的具体代码,供大家参考,具体内容如下
HTML部分代码
<template> <li id="box" class="wrapper"> <li 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> </li> </li> </template>
List是单个列表组件,也可以替换成li。
css部分代码
<style scoped> .wrapper { width: 96vw; height: 90vh; position: absolute; left: 2vw; top: 1rem; overflow: hidden; } .contain > li:nth-child(2n) {//这个样式是我这个项目所需,与无缝滚动无直接关系,可以忽略 margin-left: 2vw; } .anim { transition: all 0.5s; margin-top: -7vh; } </style>
我的List组件是设置了float:left的,所以id="con1"的li是没有高度的
js部分代码
<script> import List from './List'; export default { name: 'Contain', data () { return { cloudList: [],//数组用来存放列表数据 date: '',//最新数据更新日期 animate: false, time: 3000,//定时滚动的间隙时间 setTimeout1: null, setInterval1: null }; }, components: { List }, methods: { // 获取json数据并且更新日期 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小时更新一次数据 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; // 鼠标移入滚动区域停止滚动 contain.onmouseenter = function () { clearInterval(_this.setInterval1); var count = 0; // 如果鼠标超过十秒不动 就启动滚动 setInterval2 = setInterval(function () { count++; if (count === 10) { _this.scroll(); _this.setInterval1 = setInterval(_this.scroll, _this.time); } }, 1000); //鼠标一动就停止滚动并且计数count置为0 contain.onmousemove = function () { count = 0; clearInterval(_this.setInterval1); }; }; // 鼠标移出滚动区域 contain.onmouseleave = function () { clearInterval(setInterval2); clearInterval(_this.setInterval1); _this.scroll(); _this.setInterval1 = setInterval(_this.scroll, _this.time); }; } }; </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue 选中背景高亮(vue 如何设置背景颜色及透明度)
- vue3兼容的插件多吗(关于vue3编写挂载DOM的插件问题)
- vue 路由的两种模式(Vue3使用路由VueRouter4的简单示例)
- vueclass和style绑定(Vue中Class和Style实现v-bind绑定的几种用法)
- vue可以用vite打包吗(vite+vue3+element-plus项目搭建的方法步骤)
- 使用vue组件开发项目(Vue记事本实例详解)
- vue图片组件使用方法(Vue图片裁剪组件实例代码)
- vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)
- vue 计算一段时间的月份和天数(vue实现指定日期之间的倒计时)
- vue中的指令及用法(详解Vue进阶构造属性)
- vue计算两个日期差几分钟(vue实现同时设置多个倒计时)
- vue3.0安装element(vue3+electron12+dll开发客户端配置详解)
- vue 动态绑定指令(vue动态绑定图标的完整步骤)
- vue 父组件向子组件传值几种方法(Vue中父组件向子组件传递数据的几种方法)
- vue自定义组件修饰符(Vue自定义组件使用事件修饰符的踩坑记录)
- vue怎么操作表格(如何在在Vue3中使用markdown 编辑器组件)
- X86处理器的梦魇 苹果M1自研芯片到底有多强(苹果M1自研芯片到底有多强)
- 泰剧《爱欲之神》Boom kitkong和Great合体杂志(泰剧爱欲之神Boomkitkong和Great合体杂志)
- 素人恋爱综艺火药味十足 男生为赢得芳心集体扯头花,真是出好戏(素人恋爱综艺火药味十足)
- 《囧妈》为何受抵制 春节七部影片撤档背后的责任与博弈(囧妈为何受抵制)
- 提醒 2019年起河南驾考要开设科目五 官方回应来了(2019年起河南驾考要开设科目五)
- 省 市书法家协会 送万福进万家 活动走进禹州美丽乡村(省市书法家协会)
热门推荐
- docker导出日志(excel导出在docker环境中总是失败的问题)
- laravel api 调试(laravel 实现设置时区的简单方法)
- css3基础入门(详解使用CSS3的@media来编写响应式的页面)
- 云服务器是属于什么类型的服务(什么是真正的云服务器?云服务器优势盘点)
- ftp服务器资源共享(免费ftp服务器地址大全)
- css padding简写
- python内置函数一览表(Python面向对象程序设计构造函数和析构函数用法分析)
- jQuery中noConflict()的用法
- css3边框讲解(详解css3 object-fit属性)
- sql server数据库权限(SQL Server中通用数据库角色权限的处理详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9