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怎么配置到idea(idea编译器vue缩进报错问题场景分析)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- vue做个人页面(vue简易记事本开发详解)
- vue路由跳转自动定位在哪里(Vue路由this.route.push跳转页面不刷新的解决方案)
- springbootvue项目代码(Vue+SpringBoot实现支付宝沙箱支付的示例代码)
- vue怎么在中间加图片(Vue实现多图添加显示和删除)
- 数组循环遍历展示vue(Vue中foreach数组与js中遍历数组的写法说明)
- vue获取图片并展示(vue卡片式点击切换图片组件使用详解)
- vue常用的指令和修饰符(Vue中 Vue.prototype使用详解)
- vuecli配置环境变量(Vue CLI中模式与环境变量的深入详解)
- vue和springboot分页开发实现(解决Vue+SpringBoot+Shiro跨域问题)
- mongovue的使用
- vue3.0路线图(Vue3.0 自己实现放大镜效果案例讲解)
- vue.js入门教学第15讲(Vue.js 使用AntV X6的示例步骤)
- vue前端打包发布教程(Vue项目打包、合并及压缩优化网页响应速度)
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- 冰岛旅游攻略(冰岛旅游攻略及花费八日游)
- 寒假旅游攻略(成都寒假旅游攻略)
- 菲律宾旅游攻略(菲律宾旅游攻略地图)
- 清华大学难考吗(清华大学考研录取分数线)
- 观花盆栽佛肚竹盆景制作及养护(观花盆栽佛肚竹盆景制作及养护)
- 春天养佛肚竹,做好这几件事,叶绿根壮寓意好 越养越旺家(春天养佛肚竹做好这几件事)
热门推荐
- vue 父组件传值(Vue两个同级组件传值实现)
- vue表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)
- 护卫神主机大师教程(护卫神主机大师Linux登录账户密码忘记的解决办法)
- linux简单脚本(linux脚本基础详细介绍)
- html5基本结构图(HTML5中的网络存储实现方式)
- 云服务器ecs更换可用区(在阿里云管理控制台重置ECS实例的密码并重启服务器后无法访问该服务器)
- nginx和php怎么结合(php和nginx交互实例讲解)
- ecmascript编程语言(一篇文章弄懂ECMAScript中的操作符)
- html5中提供的绘图元素(使用Html5中的cavas画一面国旗)
- docker容器访问权限(docker 容器自定义 hosts 网络访问操作)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9