好客租房144-渲染城市列表

使用页面渲染城市列表

1讲获取到的citylist和cityindex为组件的状态数据

2修改list组件的rowCount为index的索引

3将rowRender函数 添加到组件中 以便在函数中获取到状态数据citylist和cityindex

4修改list组件的rowRender组件方法

5修改list组件的rowHeight为函数 动态计算每一行的高度 因为每一行高度都不相同

import React from 'react'
import axios from 'axios'
//导入axios
//导入navBar组件
import { NavBar, Icon } from 'antd-mobile'
import './index.scss'
import { getCurrentCity } from '../../utils'
//导入react-virtualized组件
import { List, AutoSizer } from 'react-virtualized'
// 数据格式化的方法
// list: [{}, {}]
const formatCityData = (list) => {
  const cityList = {}
  // const cityIndex = []

  // 1 遍历list数组
  list.forEach((item) => {
    // 2 获取每一个城市的首字母
    const first = item.short.substr(0, 1)
    // 3 判断 cityList 中是否有该分类
    if (cityList[first]) {
      // 4 如果有，直接往该分类中push数据
      // cityList[first] => [{}, {}]
      cityList[first].push(item)
    } else {
      // 5 如果没有，就先创建一个数组，然后，把当前城市信息添加到数组中
      cityList[first] = [item]
    }
  })

  // 获取索引数据
  const cityIndex = Object.keys(cityList).sort()

  return {
    cityList,
    cityIndex,
  }
}
// 列表数据的数据源
const list = Array(100).fill('react-virtualized')

class cityList extends React.Component {
  state = {
    cityList: [],
    cityIndex: [],
  }

  componentDidMount() {
    this.getCityList()
  }
  // 渲染每一行数据的渲染函数
  // 函数的返回值就表示最终渲染在页面中的内容
  rowRenderer({
    key, // Unique key within array of rows
    index, // 索引号
    isScrolling, // 当前项是否正在滚动中
    isVisible, // 当前项在 List 中是可见的
    style, // 注意：重点属性，一定要给每一个行数据添加该样式！作用：指定每一行的位置
  }) {
    return (
      <div key={key} style={style} className="city">
        <div className='title'>S</div>
                <div className='name'>上海</div>
      </div>
    )
  }
  async getCityList() {
    const res = await axios.get('http://localhost:8080/area/city?level=1')
    console.log(res, 'resss')
    const { cityList, cityIndex } = formatCityData(res.data.body)
    console.log(cityList, cityIndex)

    const hotRes = await axios.get('http://localhost:8080/area/hot')
    console.log(hotRes, 'hotRes')

    cityList['hot'] = hotRes.data.body
    cityIndex.unshift('hot')
    console.log(cityList, cityIndex, 'hotList')
    //获取当前定位城市
    const curcity = await getCurrentCity()

    cityList['#'] = [cityList]
    cityIndex.unshift('#')

    this.setState({
      cityList,
      cityIndex,
    })
  }

  render() {
    return (
      <div className="citylist">
        <NavBar
          className="navbar"
          mode="light"
          icon={<i className="iconfont icon-back" />}
          onLeftClick={() => this.props.histoty.push.go(-1)}
          // 导航栏右边内容
          // rightContent={[
          //  <Icon
          //    key="0"
          //    type="search"
          //    style={{ marginRight: '16px' }}
          //  />,
          //  <Icon key="1" type="ellipsis" />,
          // ]}
        >
          城市选择
        </NavBar>
        {/* 城市列表 */}
        <AutoSizer>
          {({ width, height }) => (
            <List
              width={width}
              height={height}
              rowCount={this.state.cityIndex.length}
              rowHeight={100}
              rowRenderer={this.rowRenderer}
            />
          )}
        </AutoSizer>
      </div>
    )
  }
}

export default cityList

运行结果