目录滚动特效（React实现）

目录

实现思路：（部分代码包含ts语法）

总代码：

---

制作了一个热搜滚动板，里面的标题可以不断滚动，当鼠标移入的时候滚动暂停，可以点击上面的链接。效果如下：

实现思路：（部分代码包含ts语法）

一、根据列表循环出标签：

1、利用了map函数，将给定数组中的标题循环渲染成标签

let arr = [
            '开启中国-中亚合作新时代',
            '深圳70后女副区长白发照走红',
            '女子官宣结婚被民警提醒赶紧分手',
            '形成推动高质量发展的强大动力',
            '为什么这届年轻人基本不走亲戚了？',
            '应急部称希望出现更多“朝阳群众”',
            '工程师要求供应商安排嫖娼被开',
            '杨幂称演员名字顺序该为角色让位',
            '山西发生偷排不明液体案件致3死',
            '大巴司机被曝开车回微信刷朋友圈',
            '杨洋王楚然恋情疑似曝光',
            '男童喉咙长菜花样肿块确诊感染HPV',
            '罗翔谈女子遭掌掴还手被判定互殴',
          ]

......

{arr.map((item,index)=>{
  return(
    <a href='/#' key={index}><div key={index}>{item}</div></a>
  )
})}

2、然后还要加一个当arr.length>7时需要再添加列表前7个标签用于滚动的循环过度，先&&条件渲染，然后filter过滤出前7个组成的数组再执行一次