好客租房121-租房小组分业务和数据处理

1根据当前地理位置展示不同小组信息

2根据后台接口找到找房数据

3前端只负责渲染

数据获取

1在state中获取数据

2根据文档获取数据

import React from 'react'
import axios from 'axios'
//留白
import { Carousel, Flex } from 'antd-mobile'
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'
 
//导入样式
import './index.scss'
 
const navs = [
    {
        id: 1,
        img: Nav1,
        title: '整租',
        path: '/home/list',
    },
    {
        id: 2,
        img: Nav2,
        title: '合租',
        path: '/home/list',
    },
    {
        id: 3,
        img: Nav3,
        title: '地图找房',
        path: '/home/list',
    },
    {
        id: 4,
        img: Nav4,
        title: '去出租',
        path: '/home/list',
    },
]
// 轮播图不会自动播放  数据返回过来的时候高度不够 数据加载前后数据的问题
class Index extends React.Component {
    state = {
        data: ['1', '2', '3'],
        imgHeight: 212,
        isSwiperLoding: false,
        groups: [],
    }
    componentDidMount() {
        // simulate img loading
        this.getGroups()
        setTimeout(() => {
            this.setState({
                data: [
                    'AiyWuByWklrrUDlFignR',
                    'TekJlZRVCjLFexlOCuWn',
                    'IJOtIlfsYdTyaDTRVrLI',
                ],
                isSwiperLoding: true,
            })
        }, 100)
    }
    async getSwipers() {
        const res = await axios.get('http://localhost:8080/home/swiper')
        console.log('轮播如数据为:', res)
        //   this.setState({
        //       swiper:res.data.body
        //   })
    }
    async getGroups() {
        const res = await axios.get('http://localhost:8080/home/groups', {
            params: {
                area: 'AREA%7C88cff55c-aaa4-e2e0',
            },
        })
        console.log('轮播如数据为:', res)
        this.setState({
            groups: res.data.body,
        })
    }
 
    //渲染轮播图的方法
    renderSwipers() {
        return this.state.data.map((val) => (
            <a
                key={val}
                href="http://www.alipay.com"
                style={{
                    display: 'inline-block',
                    width: '100%',
                    height: this.state.imgHeight,
                }}
            >
                <img
                    src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top' }}
                    onLoad={() => {
                        // fire window resize event to change height
                        window.dispatchEvent(new Event('resize'))
                        this.setState({ imgHeight: 'auto' })
                    }}
                />
            </a>
        ))
    }
    //渲染导航菜单
    renderNavs() {
        return navs.map((item) => (
            <Flex.Item
                key={item.id}
                onClick={() => {
                    this.props.history.push(item.path)
                }}
            >
                <img src={item.img} alt="" />
                <h2>{item.title}</h2>
            </Flex.Item>
        ))
    }
    render() {
        return (
            //留白 WingBlank
            <div className="index">
                <div className="swiper">
                    {this.state.isSwiperLoding === true ? (
                        <Carousel
                            //自动播放
                            autoplay={true}
                            infinite
                            //   beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                            //   afterChange={index => console.log('slide to', index)}
                        >
                            {this.renderSwipers()}
                        </Carousel>
                    ) : (
                        ''
                    )}
                </div>
 
                <Flex className="nav">{this.renderNavs()}</Flex>
            </div>
        )
    }
}
 
export default Index
总结

通过接口获取数据 获取到需要的数据格式