循环无缝滚动的列表知识点

  1. 动态渲染列表，高度动态计算
  2. 过渡动画
    1. css3 animation 动画
    2. style 动态修改 top动画

https://github.com/chenxuan0000/seamless-scroll/blob/master/src/content/seamless.js
https://github.com/chenxuan0000/vue-seamless-scroll/blob/master/src/components/myClass.vue
https://juejin.cn/post/6983595654652100616

https://www.jb51.net/article/178366.htm
https://www.jq22.com/demo/jqueryslide202004132315/

https://dev.to/dhilipkmr/creating-infinite-scroll-with-15-elements-4dg4
https://juejin.cn/post/7141304226470166565
Creating Infinite Scroll with 15 Elements

hooks 无缝轮动

https://blog.csdn.net/weixin_44952328/article/details/124150886

seamless-scroll

https://github.com/chenxuan0000/seamless-scroll
yarn add seamscroll
在线案例 https://chenxuan0000.github.io/seamless-scroll
seamless源码 https://github.com/chenxuan0000/seamless-scroll/blob/master/src/content/seamless.js

  1. import React, { useEffect, useRef, memo } from 'react';
  2. import { array } from 'prop-types';
  3. import * as seamless from 'seamscroll';
  4. import { isEqual } from 'lodash';
  5. import cls from 'classnames';
  6. import styles from './style.module.less';
  8. SeamlessList.propTypes = {
  9.   dataSource: array.isRequired,
  10. };
  12. function SeamscrollList({ dataSource }) {
  13.   const domRef = useRef(null);
  15.   useEffect(() => {
  16.     if (!domRef.current) return;
  17.     seamless.init({
  18.       dom: domRef.current,
  19.       direction: 1, // 向上滚动 0 👇🏻; 1 👆🏻; 2 👈🏻; 3 👉🏻
  20.       // step: 3, // 一次轮播多少个，默认一个
  21.       singleHeight: 40, // 行高
  22.       waitTime: 3000, // 单步滚动等待 3s
  23.     });
  24.   }, []);
  26.   return (
  27.     <section className={styles.container}>
  28.       <ul ref={domRef}>
  29.         {dataSource.map((it, index) => (
  30.           <li className={styles.item}>
  31.             <span className={styles.col}>序号</span>
  32.             <a className={styles.col}>详情链接</a>
  33.             <b className={styles.col}>字段</b>
  34.             <time className={styles.col}>时间</time>
  35.           </li>
  36.         ))}
  37.       </ul>
  38.     </section>
  39.   );
  40. }
  42. function propsEqual({ dataSource }, props) {
  43.   return isEqual(dataSource, props.dataSource);
  44. }
  46. export default memo(SeamscrollList, propsEqual);

style.module.less

  1. .container {
  2.   position: relative;
  3.   height: 400px;
  4.   overflow: hidden;
  6.   .item {
  7.     display: flex;
  8.     height: 40px;
  9.     line-height: 40px;
  10.     cursor: pointer;
  12.     &:nth-child(odd) {
  13.       background-color: rgba(56, 66, 86, 0.6);
  14.     }
  16.     &:hover {
  17.       background: rgba(250, 250, 250, 0.06);
  18.     }
  19.   }
  21.   .col {
  22.     flex: 1;
  23.     padding-inline: 8px;
  24.   }
  25. }

owl carousel轮播

依赖 jquery
https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html