使用React做个简单的页面-02
项目实战之首页模块
实现轮播图
1.页面效果
代码实现
pc_index.js页面
加载新闻
页面 效果
代码实现
加载图片
页面效果
代码实现
图片组件代码
import React from 'react';
import {Card} from 'antd';
import {Router, Route, Link, browserHistory} from 'react-router'
export default class PCNewsImageBlock extends React.Component {
constructor() {
super();
this.state = {
news: ''
};
}
componentWillMount() {
var myFetchOptions = {
method: 'GET'
};
fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type + "&count=" + this.props.count, myFetchOptions).then(response => response.json()).then(json => this.setState({news: json}));
};
render() {
const styleImage = {
display: "block",
width: this.props.imageWidth,
height: "90px"
};
const styeH3 = {
width: this.props.imageWidth,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
};
const {news} = this.state;
const newsList = news.length
? news.map((newsItem, index) => (
<div key={index} class="imageblock">
<Link to={`details/${newsItem.uniquekey}`} target="_blank">
<div class="custom-image">
<img alt="" style={styleImage} src={newsItem.thumbnail_pic_s}/>
</div>
<div class="custom-card">
<h3 style={styeH3}>{newsItem.title}</h3>
<p>{newsItem.author_name}</p>
</div>
</Link>
</div>
))
: '没有加载到任何新闻';
return (
<div class="topNewsList">
<Card title={this.props.cartTitle} bordered={true} style={{
width: this.props.width
}}>
{newsList}
</Card>
</div>
);
};
}
移动端开发
页面效果
实现代码
import React from 'react';
import MobileHeader from './mobile_header';
import MobileFooter from './mobile_footer';
import {Tabs, Carousel} from 'antd';
const TabPane = Tabs.TabPane;
import MobileList from './mobile_list';
export default class MobileIndex extends React.Component {
render() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
autoplay: true
};
return (
<div>
<MobileHeader></MobileHeader>
<Tabs>
<TabPane tab="头条" key="1">
<div class="carousel">
<Carousel {...settings}>
<div><img src="./src/images/carousel_1.jpg"/></div>
<div><img src="./src/images/carousel_2.jpg"/></div>
<div><img src="./src/images/carousel_3.jpg"/></div>
<div><img src="./src/images/carousel_4.jpg"/></div>
</Carousel>
</div>
<MobileList count={20} type="top"/>
</TabPane>
<TabPane tab="社会" key="2">
<MobileList count={20} type="shehui"/>
</TabPane>
<TabPane tab="国内" key="3">
<MobileList count={20} type="guonei"/>
</TabPane>
<TabPane tab="国际" key="4">
<MobileList count={20} type="guoji"/>
</TabPane>
<TabPane tab="娱乐" key="5">
<MobileList count={20} type="yule"/>
</TabPane>
</Tabs>
<MobileFooter></MobileFooter>
</div>
);
};
}
组件代码
import React from 'react';
import {Row,Col} from 'antd';
import {Router, Route, Link, browserHistory} from 'react-router'
export default class MobileList extends React.Component {
constructor() {
super();
this.state = {
news: ''
};
}
componentWillMount() {
var myFetchOptions = {
method: 'GET'
};
fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type + "&count=" + this.props.count, myFetchOptions).then(response => response.json()).then(json => this.setState({news: json}));
};
render() {
const {news} = this.state;
const newsList = news.length
? news.map((newsItem, index) => (
<section key={index} className="m_article list-item special_section clearfix">
<Link to={`details/${newsItem.uniquekey}`}>
<div className="m_article_img">
<img src={newsItem.thumbnail_pic_s} alt={newsItem.title} />
</div>
<div className="m_article_info">
<div className="m_article_title">
<span>{newsItem.title}</span>
</div>
<div className="m_article_desc clearfix">
<div className="m_article_desc_l">
<span className="m_article_channel">{newsItem.realtype}</span>
<span className="m_article_time">{newsItem.date}</span>
</div>
</div>
</div>
</Link>
</section>
))
: '没有加载到任何新闻';
return (
<div>
<Row>
<Col span={24}>
{newsList}
</Col>
</Row>
</div>
);
};
}
以上是 使用React做个简单的页面-02 的全部内容, 来源链接: utcz.com/z/383880.html