vue控制div滚动条(vue3实现CSS无限无缝滚动效果)
类别:编程学习 浏览量:2434
时间:2021-10-21 07:39:25 vue控制div滚动条
vue3实现CSS无限无缝滚动效果本文实例为大家分享了vue3实现CSS无限无缝滚动效果的具体代码,供大家参考,具体内容如下
template
双层li嵌套,进行隐藏滚动显示
<li class="list-container"> <li class="marquee" id="carList"> <template v-for="(item, index) in dataMap.list" :key="index"> <li class="list-item"> <li class="item-name text-overflow">{{ item.name }}</li> <li class="item-road text-overflow">{{ item.road }}</li> </li> </template> </li> </li>
script
复制dom元素中的内容,衔接上一次滚动效果
export default defineComponent({ setup() { const dataMap = reactive({ list: [ { name: '浙A89268', road: '游8路', status: 0 }, { name: '浙A89268', road: '游8路', status: 0 }, { name: '浙A89268', road: '游8路', status: 1 }, { name: '浙A89268', road: '游8路', status: 0 }, { name: '浙A89268', road: '游8路', status: 1 }, { name: '浙A89268', road: '游1路', status: 0 }, ], }); onMounted(() => { const marquee = document.getElementById('carList'); marquee.innerHTML = marquee.innerHTML + marquee.innerHTML; }); } })
style
CSS手写动画效果
.list-container { width: 720px; height: 170px; margin-left: 13px; overflow: hidden; position: relative; } //无限滚动 .marquee { //animation-delay: -5s; animation: marquee 15s linear infinite; } .marquee:hover { animation-play-state: paused; } @keyframes marquee { 0% { transform: translateY(0%); } 100% { transform: translateY(-51%); //这里不是-100%! } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- vue控制div滚动条(vue3实现CSS无限无缝滚动效果)
- vue实现商品详情讲解(京东 Vue3 组件库支持小程序开发的详细流程)
- vue3.0安装element(vue3+electron12+dll开发客户端配置详解)
- vue3 ref 的用法(Vue3中watchEffect的用途浅析)
- vue3.0零基础入门(快速掌握Vue3.0中如何上手Vuex状态管理)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- vue将弹框抽离成组件(vue3 可拖动的左右面板分割组件实现)
- vue动态路由实现权限控制(vue2/vue3路由权限管理的方法实例)
- vue3.0 黑暗风格(Vue3.0 手写放大镜效果)
- vue3.0路线图(Vue3.0 自己实现放大镜效果案例讲解)
- vue 路由的两种模式(Vue3使用路由VueRouter4的简单示例)
- vue-router起步教程交流(vue3使用vue-router的完整步骤记录)
- vue3 props用法(vue3组合API中setup、 ref、reactive的使用大全)
- vue前端搜索功能如何实现(使用Vue3+Vant组件实现App搜索历史记录功能示例代码)
- 散文 八月再见,九月,我在风中等你(散文八月再见九月)
- 8月再见 9月你好(8月再见)
- 魔兽世界 设计师爆料,原始版本并无PVP,跨阵营属于返璞归真(魔兽世界设计师爆料)
- 吐槽完《弧光大作战》之后,我们和设计师聊了聊魔兽首款手游的立项初衷和未来(吐槽完弧光大作战之后)
- 魔兽争霸3自定义战役少年杰雷 2(魔兽争霸3自定义战役少年杰雷)
- 今日菜价 芥兰涨幅最高 1.33 ,花菜降幅最高 3.10(今日菜价芥兰涨幅最高)
热门推荐
- sqlserver仲裁状态(使用 SQL 服务器时,"评估期已过期"错误消息解决方法)
- 安装C# Windows服务需要“设置服务登录”
- php创建多个文件(PHP实现单文件、多个单文件、多文件上传函数的封装示例)
- php redis配置(php+redis实现消息队列功能示例)
- vue中什么时候需要set属性(Vue.set和this.$set使用和区别)
- VS中打开.ashx文件
- docker部署高性能服务器(Docker部署SQL Server 2019 Always On集群的实现)
- mysql substr函数的用法(MySQL切分函数substring的具体使用)
- mysql建立索引的主要目的(浅谈Mysql哪些字段适合建立索引)
- SQLServer日期函数总结案例详解(SQLServer日期函数总结案例详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9