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

• Z时代
• 2024-01-10
• 分类：综合

项目实战之首页模块

     实现轮播图

      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