16.首页列表制作+加推荐部分代码编写19-06-21

代码见https://gitee.com/XiaoKunErGe/JianShu.git历史版本第16次提交。

屏幕快照 2019-06-21 15.14.38.png

一.到home目录下的List中现将列表的及布局在本地实现
List.js

     <ListItem>
          <img className='pic' src="https://oimageb2.ydstatic.com/image?id=6730783280712305022&product=adpublish&w=300&h=200&sc=0&rm=2&gsb=0&gsbd=60"/>
          <ListInfo>
            <h3 className='title'>Deepin体验半年感受</h3>
            <p className='desc'>提及Linux，很多人第一感觉是软件太少，不能作为生产系统使用。的确这是Linux的主要特点之一。很多人都只是尝尝鲜，安装双系统也仅仅是流于体验一下安装的过程，实际使用少之又少。</p>
          </ListInfo>
        </ListItem>
        <ListItem>
          <img className='pic' src="https://oimageb2.ydstatic.com/image?id=6730783280712305022&product=adpublish&w=300&h=200&sc=0&rm=2&gsb=0&gsbd=60"/>
          <ListInfo>
            <h3 className='title'>Deepin体验半年感受</h3>
            <p className='desc'>提及Linux，很多人第一感觉是软件太少，不能作为生产系统使用。的确这是Linux的主要特点之一。很多人都只是尝尝鲜，安装双系统也仅仅是流于体验一下安装的过程，实际使用少之又少。</p>
          </ListInfo>
     </ListItem>

style.js

export const ListItem = styled.div`
  overflow: hidden;
  padding: 20px 0;
  border-bottom: 1px solid #dcdcdc;
  .pic{
    display: block;
    width: 125px;
    height: 100px;
    float: right;
    border-radius: 10px;
  }
`;
export const ListInfo = styled.div`
  width: 500px;
  float: left;
  .title {
    line-height: 27px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
  .desc {
    line-height: 24px;
    font-size: 13px;
    color: #999;
  }
`;

二.使用reducer处理数据,将固有数据添加入defaultState里面

articleList:[{
    id:1,
    title:'Deepin体验半年感受',
    desc:'提及Linux，很多人第一感觉是软件太少，不能作为生产系统使用。的确这是Linux的主要特点之一。很多人都只是尝尝鲜，安装双系统也仅仅是流于体验一下安装的过程，实际使用少之又少。',
    imgUrl:'https://oimageb2.ydstatic.com/image?id=6730783280712305022&product=adpublish&w=300&h=200&sc=0&rm=2&gsb=0&gsbd=60',
  },{
    id:2,
    title:'Deepin体验半年感受',
    desc:'提及Linux，很多人第一感觉是软件太少，不能作为生产系统使用。的确这是Linux的主要特点之一。很多人都只是尝尝鲜，安装双系统也仅仅是流于体验一下安装的过程，实际使用少之又少。',
    imgUrl:'https://oimageb2.ydstatic.com/image?id=6730783280712305022&product=adpublish&w=300&h=200&sc=0&rm=2&gsb=0&gsbd=60',
  },{
    id:3,
    title:'Deepin体验半年感受',
    desc:'提及Linux，很多人第一感觉是软件太少，不能作为生产系统使用。的确这是Linux的主要特点之一。很多人都只是尝尝鲜，安装双系统也仅仅是流于体验一下安装的过程，实际使用少之又少。',
    imgUrl:'https://oimageb2.ydstatic.com/image?id=6730783280712305022&product=adpublish&w=300&h=200&sc=0&rm=2&gsb=0&gsbd=60',
  }]

到List中通过react-redux的connect获取数据。
List.js

import React, { Component } from 'react';
import {connect} from 'react-redux'
import { ListItem, ListInfo } from '../style';

class List extends Component {
  render(){
    const { list } = this.props;
    return(
      <div>
        {
          list.map((item)=>{
            return(
              <ListItem key={item.get('id')}>
                <img className='pic'
                     src={item.get('imgUrl')}
                />
                <ListInfo>
                  <h3 className='title'>{item.get('title')}</h3>
                  <p className='desc'>{item.get('desc')}</p>
                </ListInfo>
              </ListItem>
            )
          })
        }
      </div>
    )
  }
}
const mapStateToProps =(state)=>({
  list: state.getIn(['home','articleList'])
});
export default connect(mapStateToProps)(List);

OK，之前的换一批没有背景色去添加一下到style中的SearchInfo里添加background: #fff;
这时还有一些image报黄，即使用img标签都要加alt标签，所以要在所有img标签中都加入alt

<img className='pic'
                     src={item.get('imgUrl')}
                     alt=''
                />

右边推荐和作者推荐部分雷同，不加复述，学习CSS时在详细介绍。

最后编辑于：2019.06.21 16:18:01