利⽤AntDesign组件-Caroul实现⼴告上下轮播的效果
故事背景：很多时候前端要做⼀个类似于轮播图⼀样的⼴告位，如果是是使⽤React和AntDesign的话，可以很⽅便的实现。
要实现如图效果：数据两条两条的切换，动画平滑
原始数据：
letlist=[
{
id:'0',
title:'我是⼴告⼀号',
},
{
id:'2',
title:'我是⼴告⼆号',
},
{
id:'3',
title:'我是⼴告三号',
},
{
id:'4',
title:'我是⼴告四号',
},
{
id:'5',
title:'我是⼴告五号',
},
{
id:'6',
title:'我是⼴告六号',
}
];
处理成下⾯集合，⽤于两条两条数据得显⽰，想界⾯上显⽰3条或者更多可按照相同逻辑处理
处理的⽅法：
letlist=[
{
id:'0',
title:'我是⼴告⼀号',
},
{
id:'2',
title:'我是⼴告⼆号',
},
{
id:'3',
title:'我是⼴告三号',
},
{
id:'4',
title:'我是⼴告四号',
},
{
id:'5',
title:'我是⼴告五号',
},
{
id:'6',
title:'我是⼴告六号',
}
];
letdivList=[];
letlength=/2;
for(leti=0;i
letitemList=[];
for(letj=i*2;j
if(list[j])
itemList=[...itemList,list[j]];
el
itemList=[...itemList,{}];
}
if(>0)
divList=[...divList,itemList];
}
具体操作步骤：
1.在项⽬中引⼊AntDesign,可⽤npminstallantd;
2.在具体的页⾯引⼊Caroul组件，可⽤import{Caroul}from'antd';
3.写好HTML和CSS，搭建好界⾯，将数据list处理成想要的形式（上⾯介绍了）;
完成的HTML和JS代码如下（我是写在umi框架中的，不过框架不重要，和功能没有太⼤关系，只要理解，在哪都能引⽤）：
import{Caroul}from'antd';
importstylesfrom'./';
functionIndex(){
letlist=[
{
id:'0',
title:'我是⼴告⼀号',
},
{
id:'2',
title:'我是⼴告⼆号',
},
{
id:'3',
title:'我是⼴告三号',
},
{
id:'4',
title:'我是⼴告四号',
},
{
id:'5',
title:'我是⼴告五号',
},
{
id:'6',
title:'我是⼴告六号',
}
];
letdivList=[];
letlength=/2;
for(leti=0;i
letitemList=[];
for(letj=i*2;j
if(list[j])
itemList=[...itemList,list[j]];
el
itemList=[...itemList,{}];
}
if(>0)
divList=[...divList,itemList];
}
(divList)
return(
商务
头条
{
((s,i)=>
{
((s1,i)=>
?
)
}
)
}
)
}
exportdefaultIndex;
对应的css:(我是⽤最简单的less写的)
.headline{
padding:16px;
border-bottom:1pxsolid#e5e5e5;
.title{
width:56px;
display:inline-block;
padding-right:16px;
font-size:17px;
color:#1A1A1A;
border-right:1pxsolid#e5e5e5;
}
.adverti{
width:50%;
display:inline-block;
position:relative;
top:8px;
ul{
margin-bottom:0;
font-size:12px;
color:#454545;
padding:4px04px15px;
list-style:none;
li{
line-height:22px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
}
}
}
本文发布于:2023-01-02 13:43:36，感谢您对本站的认可！
本文链接：http://www.wtabcd.cn/fanwen/fan/90/78069.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
