好客租房146-渲染(展示索引下每一行的高度)

简介: 好客租房146-渲染(展示索引下每一行的高度)
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')
const TITLE_HEIGHT = 36
const NAME_HEIGHT = 50
class cityList extends React.Component {
  state = {
    cityList: [],
    cityIndex: [],
  }
  //处理封装字母索引的方法
  formDataCityIndex = (letter) => {
    switch (letter) {
      case '#':
        return '当前定位'
      case 'hot':
        return '热门城市'
      default:
        return letter.toUpperCase()
    }
  }
  componentDidMount() {
    this.getCityList()
  }
  // 渲染每一行数据的渲染函数
  // 函数的返回值就表示最终渲染在页面中的内容
  rowRenderer({
    key, // Unique key within array of rows
    index, // 索引号
    isScrolling, // 当前项是否正在滚动中
    isVisible, // 当前项在 List 中是可见的
    style, // 注意:重点属性,一定要给每一个行数据添加该样式!作用:指定每一行的位置
  }) {
    //获取每一行的索引号
    const { cityIndex, cityList } = this.state
    const letter = cityIndex[index]
    //指定城市列表数据
    return (
      <div key={key} style={style} className="city">
        <div className="title">{this.formDataCityIndex(letter)}</div>
        {/* 
上海
 */}
        {cityList[letter].map((item) => (
          <div className="name" key={item.value}>
            {item.label}
          </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,
    })
  }
  getRowHeight({ index }) {
    // 索引标题高度 + 城市数量 * 城市名称的高度
    // TITLE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT
    const { cityList, cityIndex } = this.state
    return TITLE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT
  }
  render() {
    return (
      <div className="citylist">
        <NavBar
          className="navbar"
          mode="light"
          icon={<i className="iconfont icon-back" />}
          onLeftClick={() => this.props.histoty.push.go(-1)}
          // 导航栏右边内容
          // rightContent={[
          //  
          //    key="0"
          //    type="search"
          //    style={{ marginRight: '16px' }}
          //  />,
          //  ,
          // ]}
        >
          城市选择
        </NavBar>
        {/* 城市列表 */}
        <AutoSizer>
          {({ width, height }) => (
            <List
              width={width}
              height={height}
              rowCount={this.state.cityIndex.length}
              rowHeight={this.getRowHeight.bind(this)}
              rowRenderer={this.rowRenderer.bind(this)}
            />
          )}
        </AutoSizer>
      </div>
    )
  }
}
export default cityList

运行结果

图片.png

相关文章
|
6月前
|
图形学 容器
【unity实战】Unity中基于瓦片的网格库存系统——类似《逃离塔科夫》的库存系统(上)
【unity实战】Unity中基于瓦片的网格库存系统——类似《逃离塔科夫》的库存系统
101 0
|
6月前
|
图形学
【unity实战】Unity中基于瓦片的网格库存系统——类似《逃离塔科夫》的库存系统(下)
【unity实战】Unity中基于瓦片的网格库存系统——类似《逃离塔科夫》的库存系统
94 0
|
7月前
|
前端开发 JavaScript 数据挖掘
浅谈游戏地图中位置实时更新的技术方案
浅谈游戏地图中位置实时更新的技术方案
139 1
|
7月前
|
前端开发 搜索推荐 JavaScript
探析单页应用(SPA)与多页应用(MPA):从技术角度选择合适的应用形式
随着Web应用的快速发展,单页应用(SPA)和多页应用(MPA)成为了开发者们在构建Web应用时常遇到的两种选择。本文将从技术角度出发,深入比较单页应用和多页应用的特点和优势,帮助读者更好地选择适合自己项目的应用形式。
99 0
|
数据可视化 前端开发
漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案
漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案
143 1
|
存储 定位技术 开发工具
使用 ES 实现疫情地图或者外卖点餐功能(含代码及数据)
使用 ES 实现疫情地图或者外卖点餐功能(含代码及数据)
使用 ES 实现疫情地图或者外卖点餐功能(含代码及数据)
|
iOS开发 数据格式
码出一个高颜值折线图(新增柱状图、环形图)
在项目中遇到数据展示需求时,往往会通过,以列表的形式展示出数据或者以表格的形式展示。但是并不能直观的观察数据的变化,如果通过图表的形式来展示,就可以更快捷的获取到数据变化情况。
156 0
好客租房140-长列表性能优化(可视区域渲染)
好客租房140-长列表性能优化(可视区域渲染)
102 0
好客租房140-长列表性能优化(可视区域渲染)
|
索引
好客租房147-渲染(渲染右侧索引列表
好客租房147-渲染(渲染右侧索引列表
109 0
好客租房147-渲染(渲染右侧索引列表
|
索引
好客租房145-渲染城市列表(展示城市索引)
好客租房145-渲染城市列表(展示城市索引)
165 0
好客租房145-渲染城市列表(展示城市索引)