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实现钉钉的考勤日历)
- vue虚拟dom如何转换成真实dom的(vue中对虚拟dom的理解知识点总结)
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- vue组件轮播(vue+rem自定义轮播图效果)
- vue通过什么获取dom(vue异步更新dom的实现浅析)
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- vue 表格数据增加修改(vue element实现表格增加删除修改数据)
- vue函数中的默认参数(Vue3中SetUp函数的参数props、context详解)
- vue父组件怎么用子组件的数据(Vue使用v-model封装el-pagination组件的全过程)
- vue3.0零基础入门(快速掌握Vue3.0中如何上手Vuex状态管理)
- vue自定义组件修饰符(Vue自定义组件使用事件修饰符的踩坑记录)
- vue可以使用jsx语法吗(vue中正确使用jsx语法的姿势分享)
- vue中如何判断请求状态码(关于VUE的编译作用域及slot作用域插槽问题)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- vue的watch用法(Vue3中watch的用法与最佳实践指南)
- vue-router起步教程交流(vue3使用vue-router的完整步骤记录)
- 34岁的舒畅,就这样走到了末路,不知会不会后悔15年前的草率决定(就这样走到了末路)
- 不走心的古装造型 舒畅 毁容式 出演,萧蔷雷出新高度(不走心的古装造型)
- 嘉南传 第22集(嘉南传第22集)
- 哪版孙悟空最萌 黄渤躺萌了(哪版孙悟空最萌)
- 融入小人物的喜怒哀乐,黄渤饰演的角色为什么让人观看时欲罢不能(融入小人物的喜怒哀乐)
- 《极限挑战》深访都市夜归人,夜间打工者体验,黄磊录完憔悴了(极限挑战深访都市夜归人)
热门推荐
- ScriptManager.RegisterStartupScript用法
- tp5框架源码分析(tp5框架无刷新分页实现方法分析)
- 为什么做排版老出错(关于排版中经常见的问题及解决方法分享)
- sqlserver数据库中锁的4种类型(SQLSERVER对加密的存储过程、视图、触发器进行解密推荐)
- html5的语法变化(详解HTML5.2版本带来的修改)
- 如何编写更好的CSS
- Jquery对数组的操作
- python基础编程函数参数(详解Python 函数如何重载?)
- apache 的服务器配置(正确维护配置Apache服务器的方法 保护系统安全)
- 在python中各个符号含义的汇总(详解Python中is和==的区别)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9