16. 项目实战：首页开发（二）
2020-07-22 本文已影响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
