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路由this.route.push跳转页面不刷新的解决方案)
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- vue怎么定义router的动态路由(vue.js Router中嵌套路由的实用示例)
- vue组件轮播(vue+rem自定义轮播图效果)
- vue走马灯特效(Javascript结合Vue实现对任意迷宫图片的自动寻路)
- vue虚拟滚动条(vue轻松实现虚拟滚动的示例代码)
- vue实现树形结构菜单(vue递归实现三级菜单)
- vue-router的两种模式(vue-route路由管理的安装与配置方法)
- dockernginx服务器教程(Docker镜像+nginx 部署 vue 项目的方法)
- vue设置div大小(Vue实现div滚轮放大缩小)
- vue怎么操作表格(如何在在Vue3中使用markdown 编辑器组件)
- vue父组件怎么用子组件的数据(Vue使用v-model封装el-pagination组件的全过程)
- vue购物车怎么实现(Vue.js框架实现购物车功能)
- vue通过什么获取dom(vue异步更新dom的实现浅析)
- vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)
- vue 设置头部可以左右滑动(vue实现左右滑动效果实例代码)
- 15个新成 园 位置公布 深圳龙岗2022年共建花园建设又有大动作(15个新成园位置公布)
- 记者手记 书记带我去 巡街(记者手记书记带我去)
- 富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元 | 美通社(富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元)
- 二次创业 的富士胶片,在进博会上首次展示完成转型后的全线医疗产品(二次创业的富士胶片)
- 富士胶片 中国 我们对上海的信心没有任何改变(富士胶片中国)
- 赢麻了 富士公布2021年度财报 营利同比增长240(富士公布2021年度财报)
热门推荐
- 如何看idea连接mysql数据库(IDEA 链接Mysql数据库并执行查询操作的完整代码)
- 介绍几个jQuery实用函数
- sql怎么查询字段合并(SQL函数将某个字段合并在一起的操作)
- 阿里云服务器公网ip搭建(阿里云服务器无公网如何上网?)
- 如何调用dede标签(dedeCMS列表页调用tag的方法小结5.6/5.7)
- vue重置密码(Vue 两个字段联合校验之修改密码功能的实现)
- chrome调试js
- 相对布局和线性布局的区别(面试必问:圣杯布局和双飞翼布局的区别)
- mysql快速添加百万条记录(Mysql快速插入千万条数据的实战教程)
- mysql的存储性能优化(MySQL的查询缓存和Buffer Pool)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9