專案實戰之首頁模組

     實現輪播圖

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