使用React做个简单的页面-02

项目实战之首页模块

实现轮播图

1.页面效果

使用React做个简单的页面-02

代码实现

使用React做个简单的页面-02

pc_index.js页面

使用React做个简单的页面-02

加载新闻

页面效果

使用React做个简单的页面-02

代码实现

使用React做个简单的页面-02

加载图片

页面效果

使用React做个简单的页面-02

代码实现

使用React做个简单的页面-02

图片组件代码

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>
        );
    };
}

移动端开发

页面效果

使用React做个简单的页面-02

实现代码

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

相关推荐