JS实现列表无缝自动滚动
前言
现在很多数据展示大屏都会有很多的自动滚动的列表,
最近写了一个相对来说滑动比较自然的列表。
供大家参考。
接下来就是一种实现自动滚动的代码。。
一、大概思路
思路大概是将100%height的UL放在一个固定高度的div里面,
UL的position设定为absulote,不断改变top来实现上移,
上移高度我们定义为startL,初始为0,
然后上移高度超过第一个LI的高度的时候,将数据的第一条截取并放在最后一位。
将startL重置为0、直接上代码。
二、代码
liData: [ //list数据
{
id: 1, text: '声明式渲染' },
{
id: 2, text: '条件与循环' },
{
id: 3, text: '处理用户输入' },
{
id: 4, text: '组件化应用构建' },
{
id: 5, text: '恭候你多时了,舰长大人' }
],
<template>//代码并未按照正常开发展示
<div class="list-dome-box">
<div class=&