利⽤AntDesign组件-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处理成想要的形式（上⾯介绍了）;
完成的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>:
js实现轮播图最简代码<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;
}
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。