美化英雄列表
在umi中使用less
要在umi中使用less不需要任何配置,直接使用就可以了。
我们将 ./src/pages/hero/index.css
重命名为 ./src/pages/hero/index.less
,在 index.js
中修改引用。
分析页面这是一个栅格布局,我们使用antd的Row和Col实现。
这小节的最终效果,如上图所示,你可以自己先尝试着实现,如果你可以完成,那你就不需要再阅读本节内容。
实现步骤
step1 先从hero里面取出heros数据
const { heros=[] } = hero;
这里使用了es6的语法,注意这里给heros定了一个默认值,这样我们在dom里面就不要判断了。(类似 heros&&heros
这样的语句)
step2 循环取出heros,绑定页面
<Row>
{heros.map(item => (
<Col key={item.ename} span={3} >
<img src=""/>
<p>{item.cname}</p>
</Col>
))}
</Row>
step3 为页面添加样式
<Col key={item.ename} span={3} className={styles.heroitem}>
index.less
.normal {
/* background: #F2B279; */
}
.heroitem{
text-align: center;
color: #363636;
img{
width: 83px;
height: 83px;
border: 2px solid #258DF2;
border-radius:0 10px 0 10px ;
}
}
step4 保存,运行程序
我们发现,页面是我们想要的样式,但是数据反了,所以我们先将数组逆序处理。
<Row>
{heros.reverse().map(item => (
<Col key={item.ename} span={3} className={styles.heroitem}>
<img
src={`https://game.gtimg.cn/images/yxzj/img201606/heroimg/
${item.ename}/${item.ename}.jpg`}
/>
<p>{item.cname}</p>
</Col>
))}
</Row>
最终效果为
代码回顾:这节课的全部代码
作业
参考上面的写法,实现局内道具页面 http://localhost:8000/item 提示
<img src={`https://game.gtimg.cn/images/yxzj/img201606/itemimg/${data.item_id}.jpg`} />
参考答案:代码