实现数据滚动,(一次单行/一次多行(页),利用antd的Carousel走马灯组件

需求1:

每页展示三条数据,
每次滚动三条数据,也就是:滚动一页;
实现:

list为传来的数据源,通过map方法生成dom结构;

  let list = rightList.list;
  const listItem = list?.map((item: any, index: any) => {
    return (
      <div className={styles.listItem}>
        <div className={styles.index}>{index + 1}</div>
        <div className={styles.things}>{item.eventName}</div>
        <div className={styles.mian}>{item.exerciseSubject}</div>
        <div className={styles.level}>{item.exerciseLevel}</div>
        <div className={styles.obj}>{item.suitable}</div>
      </div>
    );
  });

接着对生成的dom结构进行分组,根据需求,每页展示多少个就以其为基数进行分组:
这里是三个为一组; 并且需要判断 如果不足三个 自动补上空的div,这样可以防止结构乱掉;
这样一来,newsListView 数组中存储的就是三个为一组的dom结构,将其放在Carousel组件中遍历即可完成效果;

  const newsListView = [];
  // 3个为一组来显示
  for (let i = 0; i < listItem?.length; i += 3) {
    const view = listItem?.slice(i, i + 3);
    let key = 0;
    while (view?.length < 3) {
      view.push(<div className={styles.listItem} key={`j-${key}`} />);
      key += 1;
    }
    newsListView.push(<React.Fragment key={i}>{view}</React.Fragment>);
  }

 <div className={styles.carousel}>
        <Carousel dotPosition="right" dots={false} autoplay>
          {newsListView}
        </Carousel>
      </div>

需求二:

整屏进行数据展示,每次滚动一条数据(最上面一条消失,下面新出来一条补上)
接下来说需求二的实现::

因为是每次滚动一条,所以就不能使用需求一的思路了,也就是说不能再分组,因为2个或者以上为一组的话,至少会滚动两条数据, 因此 每条数据为一组:

  const newsListView = [];
  // i个为一组来显示
  for (let i = 0; i < listItem?.length; i += 1) {
    const view = listItem?.slice(i, i + 1);
    let key = 0;
    while (view?.length < 1) {
      view.push(<div className={styles.listItem} key={`j-${key}`} />);
      key += 1;
    }
    newsListView.push(<React.Fragment key={i}>{view}</React.Fragment>);
  }

但是做着发现,组件的高度只能显示一组数据; 因此这里又牵扯到了antd的内部样式,轮播图/走马灯的原理大家应该都清楚,就是定义一个盒子,盒子里面放很长的结构,但是只显示盒子内的部分;
由此可以通过这样一种方法来实现需求二:
首先改变Carousel的样式中overflow:hidden,使所有的结构都显示出来;
紧接着在外部设置一个父盒子,给父盒子设置高度,并设置overflow:hidden;
这样就实现了需求;
改变antd内部样式的方法:
在浏览器中调出控制台,找到dom结构中相应的类名,直接复制过来

:global(.carousel___2gLRW .slick-list) {
  overflow: initial ;
}

上述代码修改了组件的溢出显示方式;
其中slick-list为组件的类名, 为避免改变其他地方这个组件的样式,在前面又加上了父元素的类名:carousel___2gLRW
ok,解决~