好客租房143-react-virtualized3让list组件占满整个屏幕

 1让list组件占满屏幕

2导入AutoSizer组件

3通过render-props模式 获取到AutoSizer组件暴露的width和height属性

4设置List组件的width和height属性

5设置城市根元素高度100% 让组件占满整个页面

6调整样式 不要出现全局滚动条

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')

// 渲染每一行数据的渲染函数
// 函数的返回值就表示最终渲染在页面中的内容
function rowRenderer({
	key, // Unique key within array of rows
	index, // 索引号
	isScrolling, // 当前项是否正在滚动中
	isVisible, // 当前项在 List 中是可见的
	style, // 注意：重点属性，一定要给每一个行数据添加该样式！作用：指定每一行的位置
}) {
	return (
		<div key={key} style={style}>
			1232 -{list[index]} {index} {isScrolling + ''}
		</div>
	)
}
class cityList extends React.Component {
	state = {
		cityList: [],
	}

	componentDidMount() {
		this.getCityList()
	}
	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('#')
	}

	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={list.length}
							rowHeight={50}
							rowRenderer={rowRenderer}
						/>
					)}
				</AutoSizer>
			</div>
		)
	}
}

export default cityList

运行结果