利用Ant Design 组件 - Carousel 实现广告上下轮播的效果

故事背景：很多时候前端要做一个类似于轮播图一样的广告位，如果是是使用React和Ant Design的话，可以很方便的实现。

要实现如图效果：数据两条两条的切换，动画平滑

原始数据：

let list=[
  {
    id:'0',
    title:'我是广告一号',
  },
  {
    id:'2',
    title:'我是广告二号',
  },
  {
    id:'3',
    title:'我是广告三号',
  },
  {
    id:'4',
    title:'我是广告四号',
  },
  {
    id:'5',
    title:'我是广告五号',
  },
  {
    id:'6',
    title:'我是广告六号',
  }
];

 处理成下面集合，用于两条两条数据得显示，想界面上显示3条或者更多可按照相同逻辑处理

处理的方法：

  let list=[
    {
      id:'0',
      title:'我是广告一号',
    },
    {
      id:'2',
      title:'我是广告二号',
    },
    {
      id:'3',
      title:'我是广告三号',
    },
    {
      id:'4',
      title:'我是广告四号',
    },
    {
      id:'5',
      title:'我是广告五号',
    },
    {
      id:'6',
      title:'我是广告六号',
    }
  ];

  let divList = [];
  let length = list.length / 2;
  for (let i = 0; i < length; i++) {
    let itemList = [];
    for (let j = i * 2; j < i * 2 + 2; j++) {
      if (list[j])
        itemList = [...itemList, list[j]];
      else
        itemList = [...itemList, {}];
    }
    if (itemList.length > 0)
      divList = [...divList, itemList];
  }

 具体操作步骤：

1.在项目中引入Ant Design, 可用npm install antd;

2.在具体的页面引入Carousel组件，可用import {Carousel} from 'antd';

3.写好HTML和CSS，搭建好界面，将数据list处理成想要的形式（上面介绍了）;

4.运用Carousel，将处理好的数据当做轮播图显示出来。一般的轮播图是显示图片，这里只要让他垂直轮播文字，就能实现我们想要的效果。Carousel设置为垂直显示：vertical， 这个参数的设置可参考antdesign官网：https://ant.design/components/carousel-cn/;

完成的HTML和JS代码如下（我是写在umi框架中的，不过框架不重要，和功能没有太大关系，只要理解，在哪都能引用）：

import {Carousel} from 'antd';
import styles from './index.less';

function Index(){
  let list=[
    {
      id:'0',
      title:'我是广告一号',
    },
    {
      id:'2',
      title:'我是广告二号',
    },
    {
      id:'3',
      title:'我是广告三号',
    },
    {
      id:'4',
      title:'我是广告四号',
    },
    {
      id:'5',
      title:'我是广告五号',
    },
    {
      id:'6',
      title:'我是广告六号',
    }
  ];

  let divList = [];
  let length = list.length / 2;
  for (let i = 0; i < length; i++) {
    let itemList = [];
    for (let j = i * 2; j < i * 2 + 2; j++) {
      if (list[j])
        itemList = [...itemList, list[j]];
      else
        itemList = [...itemList, {}];
    }
    if (itemList.length > 0)
      divList = [...divList, itemList];
  }

  console.log(divList)
  return(
    <div className={styles.headline}>
       <div className={styles.title}>
          <b>商务</b><br/>
          <b>头条</b>
       </div>
      <div className={styles.advertise}>
        <Carousel vertical autoplay={false} dots='true'>
          {
            divList.map((s, i) =>
              <div key={i}>
                <ul>
                  {
                    s.map((s1, i) =>
                      s1.id ?
                          <li key={s1.id}> {s1.title}</li>:
                        <li key={i}></li>
                    )
                  }
                </ul>
              </div>
            )
          }
        </Carousel>
      </div>
    </div>
  )
}

export default Index;

对应的css:(我是用最简单的less写的)

.headline{
  padding: 16px;
  border-bottom: 1px solid #e5e5e5;
  .title{
    width: 56px;
    display: inline-block;
    padding-right: 16px;
    font-size: 17px;
    color: #1A1A1A;
    border-right: 1px solid #e5e5e5;
  }
  .advertise{
    width: 50%;
    display: inline-block;
    position: relative;
    top: 8px;
ul{
  margin-bottom: 0;
  font-size: 12px;
  color: #454545;
  padding: 4px 0 4px 15px;
  list-style: none;
  li{
    line-height: 22px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
}
}