使用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 >

    );

  };

}