P04:通过List组件制作博客列表页

左右两边的基本布局完成后,需要对列表的单元项进行制作,也就是首页列表中的每一项。这个制作起来涉及的内容不多,因为以后要解析Markdown代码,所以这里只是先模拟一下,把基本的样式完成。因为基础知识点我们都讲过了,所以这里就以实践为主了。

编写列表项的基本结构

由于Ant Design本身就有列表相关的组件,所以我们不用把这部分独立出去,而是使用Ant Design本身所有的List组件。

打开index.js,引入List,代码如下:

import {Row, Col, List, Space} from 'antd'

然后把useState也引入过来,以后要进行使用。

import React,{useState} from 'react'

icon图标创建方法

const IconText = ({ icon, text }) => (
  <Space>
    {React.createElement(icon)}
    {text}
  </Space>
);

useState伪造一些假数据,然后在jsx中进行使用。

const [mylist,setMylist] = useState(
    [
      {title:'Vue3.x 的生命周期和钩子函数',context:'Vue3 版本的生命周期和 Vue2 比有了些变化,所以我先站在一个初学者的角度(没有学过 Vue2 版本的新手),从新讲一下 Vue3.x 的生命周期,等你完全理解之后,我们再来和 Vue2.x 的生命周期作一个对比。'},
      {title:'前端js代码规范总结',context:'如果你关心代码的本身以及编写方式,而只是担心代码是否有效的,你可以说你实践并且关心代码的规范性。专业的开发人员总是会考虑到自己便于将来还能可读和其他的团队人员,并不是仅仅考虑到运行的结果。你写的任何代码并不是只写一次,总会有其他的开发人员来做你写的代码,如果你写的不规范,而他则会痛苦不堪。希望这个人不是你。'},
      {title:'Redis + NodeJS 实现一个能处理海量数据的异步任务队列系统',context:'在最近的业务中,接到了一个需要处理约十万条数据的需求。这些数据都以字符串的形式给到,并且处理它们的步骤是异步且耗时的(平均处理一条数据需要 25s 的时间)。如果以串行的方式实现,其耗时是相当长的:'},
    ]
)

有了数据后,我们就可以用这些数据来构建List布局了。代码如下:

<List
  header={<div>最新日志</div>}
  itemLayout="vertical"
  dataSource={mylist}
  renderItem={item => (
    <List.Item>
      <div className="list-title">{item.title}</div>
      <div className="list-icon">
        <IconText icon={ClockCircleOutlined} text="2020-12-01" key="list-vertical-star-o" />
        <IconText icon={VideoCameraOutlined} text="前端教程" key="list-vertical-like-o" />
        <IconText icon={FireOutlined} text="5498人" key="list-vertical-message" />
      </div>
      <div className="list-context">{item.context}</div>  
    </List.Item>
  )}
/>

列表页CSS样式的编写

/pages文件夹下,新建立一个index.css文件。 这里给出了CSS样式的代码。

.list-title{
    font-size:1.3rem;
    color: #1e90ff;
    padding: 0 0.5rem;
}
.list-context{
    color:#777;
    padding:.5rem;
}
.list-icon{
    padding:.5rem 0;
    color:#AAA;
}
.list-icon span{
    display: inline-block;
    padding: 0 10px;
}

写完后记得引入到_app.js里边。

import '../styles/index.css'

这时候进行预览,应该就可以出现比较好看的列表样式效果了。

通过List组件制作博客列表页

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P04:通过List组件制作博客列表页

发表评论

提供最优质的资源集合

立即查看 了解详情