16. 项目实战：首页开发（二）

作者: 小二的学习日记 | 来源:发表于2020-07-22 16:18 被阅读0次

首页文章列表制作

1.添加列表中的数据

//===>src/pages/home/store/reducer.js
import { fromJS } from 'immutable';

const defaultState = fromJS({
    topicList: [{
        id: 1,
        title: "社会热点",
        imgUrl: "https://upload.jianshu.io/admin_banners/web_images/4993/421ec96ccef8aea708c84ba2972b5be484695f25.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"
    },
    {
        id: 2,
        title: "手绘",
        imgUrl: "https://upload.jianshu.io/admin_banners/web_images/4993/421ec96ccef8aea708c84ba2972b5be484695f25.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"
    }],
    articleList: [{
        id: 1,
        title: 'Android Studio 4.0 稳定版发布啦！你更新了吗',
        desc: 'Android Studio 4.0（2020年5月） 更新啦，此版本包含了各种新功能和改进，还有一些废弃配置。 重要提示：更新后，需要重新启动...',
        imgUrl: 'https://img.haomeiwen.com/i22976303/6976cfdff33d7192.png?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240'
    }, {
        id: 2,
        title: 'Android Studio 4.0 稳定版发布啦！你更新了吗',
        desc: 'Android Studio 4.0（2020年5月） 更新啦，此版本包含了各种新功能和改进，还有一些废弃配置。 重要提示：更新后，需要重新启动...',
        imgUrl: 'https://img.haomeiwen.com/i22976303/6976cfdff33d7192.png?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240'
    }, {
        id: 3,
        title: 'Android Studio 4.0 稳定版发布啦！你更新了吗',
        desc: 'Android Studio 4.0（2020年5月） 更新啦，此版本包含了各种新功能和改进，还有一些废弃配置。 重要提示：更新后，需要重新启动...',
        imgUrl: 'https://img.haomeiwen.com/i22976303/6976cfdff33d7192.png?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240'
    }, {
        id: 4,
        title: 'Android Studio 4.0 稳定版发布啦！你更新了吗',
        desc: 'Android Studio 4.0（2020年5月） 更新啦，此版本包含了各种新功能和改进，还有一些废弃配置。 重要提示：更新后，需要重新启动...',
        imgUrl: 'https://img.haomeiwen.com/i22976303/6976cfdff33d7192.png?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240'
    }]
});

export default (state = defaultState, action) => {
    switch (action.type) {
        default:
            return state;
    }
}

2.编写List组件

//===>src/pages/home/components/List.js
import React, { Component } from 'react'
import { ListItem, ListInfo } from '../style'
import { connect } from 'react-redux'
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 mapState = (state) => ({
    // list: state.get('home').get('articleList')
    list: state.getIn(['home', 'articleList'])
})

export default connect(mapState, null)(List)

3.编写ListItem和ListInfo样式

//===>src/pages/home/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;
}
`

image.png
修改一个之前的问题，我们点击搜索，发现搜索组件时透明的。我们要把他的背景色改成白色。

//===>src/common/header/style.js
...
export const SearchInfo = styled.div`
position:absolute;
left:0;
top:56px;
width:240px;
padding:0 20px;
box-shadow:0 0 8px rgba(0,0,0,.2);
background:#fff;
`
...

我们再来看下编译器。他总会报警告。这是因为，ES6语法希望我们在img标签添加一个alt=""这样的属性。我们把他加上，就不会出现警告了。

image.png
这个警告你自己改吧，根据提示找一找。

首页推荐部分代码编写

1.现在reducer中加入我们需要的数据

//===>src/pages/home/store/reducer.js
import { fromJS } from 'immutable';

const defaultState = fromJS({
    topicList: [{
        id: 1,
        title: "社会热点",
        imgUrl: "https://upload.jianshu.io/admin_banners/web_images/4993/421ec96ccef8aea708c84ba2972b5be484695f25.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"
    },
    {
        id: 2,
        title: "手绘",
        imgUrl: "https://upload.jianshu.io/admin_banners/web_images/4993/421ec96ccef8aea708c84ba2972b5be484695f25.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"
    }],
    articleList: [{
        id: 1,
        title: 'Android Studio 4.0 稳定版发布啦！你更新了吗',
        desc: 'Android Studio 4.0（2020年5月） 更新啦，此版本包含了各种新功能和改进，还有一些废弃配置。 重要提示：更新后，需要重新启动...',
        imgUrl: 'https://img.haomeiwen.com/i22976303/6976cfdff33d7192.png?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240'
    }, {
        id: 2,
        title: 'Android Studio 4.0 稳定版发布啦！你更新了吗',
        desc: 'Android Studio 4.0（2020年5月） 更新啦，此版本包含了各种新功能和改进，还有一些废弃配置。 重要提示：更新后，需要重新启动...',
        imgUrl: 'https://img.haomeiwen.com/i22976303/6976cfdff33d7192.png?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240'
    }, {
        id: 3,
        title: 'Android Studio 4.0 稳定版发布啦！你更新了吗',
        desc: 'Android Studio 4.0（2020年5月） 更新啦，此版本包含了各种新功能和改进，还有一些废弃配置。 重要提示：更新后，需要重新启动...',
        imgUrl: 'https://img.haomeiwen.com/i22976303/6976cfdff33d7192.png?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240'
    }, {
        id: 4,
        title: 'Android Studio 4.0 稳定版发布啦！你更新了吗',
        desc: 'Android Studio 4.0（2020年5月） 更新啦，此版本包含了各种新功能和改进，还有一些废弃配置。 重要提示：更新后，需要重新启动...',
        imgUrl: 'https://img.haomeiwen.com/i22976303/6976cfdff33d7192.png?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240'
    }],
    recommendList: [{
        id: 1,
        imgUrl: 'http://cdn2.jianshu.io/assets/web/banner-s-club-aa8bdf19f8cf729a759da42e4a96f366.png'
    },
    {
        id: 2,
        imgUrl: 'http://cdn2.jianshu.io/assets/web/banner-s-7-1a0222c91694a1f38e610be4bf9669be.png'
    },
    {
        id: 3,
        imgUrl: 'http://cdn2.jianshu.io/assets/web/banner-s-5-4ba25cf5041931a0ed2062828b4064cb.png'
    },
    {
        id: 4,
        imgUrl: 'http://cdn2.jianshu.io/assets/web/banner-s-6-c4d6335bfd688f2ca1115b42b04c28a7.png'
    }]
});

export default (state = defaultState, action) => {
    switch (action.type) {
        default:
            return state;
    }
}

2.编写推荐部分Recommend组件的代码

//===>src/pages/home/components/Recommend.js
import React, { Component } from 'react'
import { RecommendWrapper, RecommendItem } from '../style'
import { connect } from 'react-redux';
class Recommend extends Component {
    render() {
        return (
            <RecommendWrapper>
                {
                    this.props.list.map((item) => {
                        return <RecommendItem imgUrl={item.get('imgUrl')} key={item.get('id')} />
                    })
                }
            </RecommendWrapper>
        )
    }
}

const mapState = (state) => ({
    list:state.getIn(['home', 'recommendList'])
})
export default connect(mapState, null)(Recommend)

3.编写上面用到的RecommendWrapper和RecommendItem组件
background:url(${(props) => props.imgUrl});这句话用来获取代码中传过来的参数。

//====>src/pages/home/style.js
...
export const RecommendWrapper = styled.div`
margin:30px 0;
width:280px;
`
export const RecommendItem = styled.div`
width:280px;
height:50px;
background:url(${(props) => props.imgUrl});
background-size:contain;
`
...

这样就完成了锐减部分的代码
我们再简单的写写下面Write组件的代码
1.组件编写

//===>src/pages/home/components/Writer.js
import React, { Component } from 'react'
import { WriterWrapper } from '../style'
class Writer extends Component {
    render() {
        return (
            <WriterWrapper>HomeWork</WriterWrapper>
        )
    }
}

export default Writer

2.组件样式编写

//====>src/pages/home/style.js
...
export const WriterWrapper = styled.div`
width:278px;
border:1px solid #dcdcdc;
border-radius:3px;
height:300px;
line-height:300px;
text-align:center;
`

image.png

16. 项目实战：首页开发（二）

首页文章列表制作

首页推荐部分代码编写

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读