列表找房（十）02-渲染列表模板

渲染列表模板

列表样式调整

// find/index.scss
.header 去掉绝对定位
/* position: absolute; */// Filter/index.module.css
.root 去掉相对定位
/* position: relative; */// home下的模板根组件修改为<React.Fragment></React.Fragment>
// find下的模板根组件修改为<React.Fragment></React.Fragment>
// 或者添加如下样式
// find/index.scss需要添加root类撑满整个高度
.root {height: 100%;
}
<div className='root'>

列表数据展示

{/* 房源列表 */}
<AutoSizer>{({ height, width }) => (<Listwidth={width}height={height}rowCount={count}rowHeight={120}rowRenderer={this.renderHouseItems}/>)}
</AutoSizer>

// 渲染房源列表
renderHouseItems = ({ key, index, style }) => {const { list } = this.stateconst item = list[index]// key 表示唯一标识// style 注意：一定要传递给组件，并且组件中一定要接收并使用！！！return <HouseItem key={key} style={style} {...item} />
}

组件的类型检测（用于规范自定义组件的属性类型）

导入单独的包

import PropTypes from 'prop-types'

使用的规则

HouseItem.propTypes = {title: PropTypes.string,desc: PropTypes.string,tags: PropTypes.array.isRequired,price: PropTypes.number
}

详细的规则参见官方

页面显示效果

列表找房（十）02-渲染列表模板相关推荐

列表找房（十）03-页面滚动效果控制——WindowScroller组件用法 Scroll属性
页面滚动效果控制--WindowScroller组件用法 & Scroll属性需求:让List列表的滚动随着window窗口的滚动而滚动 WindowScroller组件用法官网:http ...
第七天黑马十次方吐槽列表与详细页、发吐槽与评论功能、问答频道功能、掌握DataURL和阿里云OSS
第7章网站前台-吐槽与问答学习目标: ** 完成吐槽列表与详细页完成发吐槽与评论功能,掌握富文本编辑器的使用完成问答频道功能掌握DataURL和阿里云OSS** 1 吐槽列表与详细页 1.1 ...
《数据结构与算法》（二十）- 散列表查找
目录前言 1. 散列表查找(哈希表)概述 1.1 散列表查找定义 1.2 散列表查找步骤 2. 散列函数的构造方法 2.1 直接定址法 2.2 数字分析法 2.3 平方取中法 2.4 折叠法 2.5 ...
【Vue】基础（三）条件渲染 - 列表渲染(key的作用与原理虚拟DOM解析) - 收集表单数据 - 持续更新中
目录 11. 条件渲染 11.1 v-if 11.2 v-show 12. 列表渲染 12.1 v-for(基本列表使用) 12.2 key的作用与原理真实DOM和其解析流程虚拟 DOM 的好处 ...
完美解决小程序一维数组循环渲染列表不够用问题
完美解决小程序一维数组循环渲染列表不够用问题参考文章: (1)完美解决小程序一维数组循环渲染列表不够用问题 (2)https://www.cnblogs.com/jessical626/p/6363 ...
Python编程基础：第十四节列表Lists
第十四节列表Lists 前言实践前言列表是一种非常常用的数据结构.我们可以用它来存储各种类型的数据. 实践我们先来创建一个名为food的列表,里面存储了一系列我喜欢的食物名称: food = ...
十、散列表（Hash Table）
一.概述散列表(Hash Table),也称"哈希表"或者"Hash 表" 1.相关概念原始数据叫作键(键值)或关键字(key): 将原始数据转化为数组下标 ...
图文列表+欢迎页面+音乐控制小程序模板
介绍: 图文列表+欢迎页面+音乐控制小程序模板,带微信小程序项目导入使用说明. 安装方式介绍: 1:安装后图标: 登录,随意一个微信号,扫描后即可登录 2:选择无appid:项目名称随意,地址选择下载 ...
Android开发笔记（三十八）列表类视图
AdapterView AdapterView顾名思义是适配器视图,Spinner.ListView和GridView都间接继承自AdapterView,这三个视图都存在多个元素并排展示的情况,所以需 ...

列表找房（十）02-渲染列表模板

渲染列表模板

列表找房（十）02-渲染列表模板相关推荐

最新文章

热门文章