利用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;
  }
}
}
}