城市列表（六）02-长列表行高内容填充——跳主页-this.props.history.push(‘home‘) & 轻提示-Toast.loading(‘正在加载‘, 0)和Toast.hide()

城市列表（六）02-长列表内容填充和宽高处理——城市列表的行高是计算所得 & 跳主页-this.props.history.push(’/home’) & 轻提示-Toast.loading(‘正在加载’, 0)和Toast.hide()

实际应用

src/views/City/index.js

//计算行高-------------------------------------
calcRowHieght = ({ index }) => {
    console.log(index)
    const { objCityList, indexList } = this.state.cityList
    // 根据索引获取标题的字符
    let letter = indexList[index]
    console.log(letter)
    // 根据标题字符，获取城市列表数据
    let clist = objCityList[letter]
    // 计算行高：标题的高度 + 条目的高度 * 城市数量
    let h = 36 + 50 * clist.length
    return h
  }

//渲染数据--------------------------------
        {/*{this.renderCityList()}*/}
        {/*
          width和height：列表的宽度和高度
          rowCount：列表的长度
          rowHeight：行的高度
          rowRenderer：渲染每一个条目的模板
        */}
        <AutoSizer>
          {({height, width}) => {
            // 只有数据获取到之后，才进行列表渲染，保证列表可以获取数据
            if (cityList) {
              return <List
                width={width}
                height={height}
                rowCount={cityList.indexList.length}
                rowHeight={this.calcRowHieght}
                rowRenderer={this.rowRenderer}
              />
            }
          }}
        </AutoSizer>
//渲染列表-------------------------------------------------------
  // 用于产生每一行的模板
  rowRenderer = ({
    // key每一个条目的唯一标识
    key,
    // 每一个条目的样式
    style,
    // 当前条目的索引
    index
  }) => {
    // 渲染每一个条目的模板
    const { objCityList, indexList } = this.state.cityList
    // 获取到标题的字符
    let letter = indexList[index]
    // 获取字符下对应的城市列表数据
    let clist = objCityList[letter]
    return (
      <div key={key} style={style} className="city">
        {/* 行标题 */}
        <div className="title">{letter}</div>
        {/* 标题下的城市列表 */}
        {clist.length>0&&clist.map(item=>(
          <div 
            className="name" 
            onClick={() => {
              // 只有一线城市数据：如果是一线城市就选中，否则提示没有数据
              if (['北京', '上海', '广州', '深圳'].includes(item.label)) {
                // 是一线城市:选中该城市（将城市数据保存在缓存中）
                localStorage.setItem('currentCity', JSON.stringify({
                  label: item.label,
                  value: item.value
                }))
                // 跳回到主页面
                this.props.history.push('/home')
              } else {
                // 不是一线城市
                Toast.info('该城市没有房源', 2)
              }
            }}
            key={item.value}>
            {item.label}
          </div>
        ))}
      </div>
    )
  }

标题列表高度-效果

添加加载提示

Toast 轻提示：https://mobile.ant.design/components/toast-cn/

src/views/City/index.js

  loadData = async () => {
    // 添加加载提示信息
    Toast.loading('正在加载', 0)   //第一步
    // 加载城市的列表数据
    let data = await axios.get('area/city', {
      params: {
        level: 1
      }
    })
    // console.log(data);
    let ret = this.translateDataFormat(data.body)
    
    // 添加热门城市数据
    let hotCity = await axios.get('area/hot')
    ret.indexList.unshift('hot')
    ret.objCityList['hot'] = hotCity.body
    
    // 添加当前城市数据
    ret.indexList.unshift('#')
    // 获取当前城市的详细数据
    let currentCity = await axios('area/info', {
      params: {
        name: '北京'
      }
    })
    ret.objCityList['#'] = [currentCity.body]
    
    // 更新数据
    this.setState({
      cityList: ret
    })
    // 隐藏提示效果   第二步
    Toast.hide()  
  }

效果-加载完关闭轻提示