行数据加载提示 & 整页加载提示 & 筛选条件弹窗时防止列表滚动 & 封装Sticky组件固定筛选栏 & 条件变化后控制列表回到顶部-window.scrollTo(0, 0)
行数据加载提示
- 当滑动过快时,数据item可能为undefined,需要进行处理
- renderHouseItems
// 用于渲染每一行列表模板
let { listData } = this.state
// 更加当前行的索引获取对应数据
let itemData = listData[index]
if (!itemData) {
return (
<div style={style} key={key}>
<p className={styles.loading}></p>
</div>
)
}
.loading {
height: 120px;
background-color: #f6f5f6;
}
整页加载提示
- 在进入到HouseList组件,加载数据之前,提供loading加载提示
- 步骤
- 进入页面, 请求数据
- 加载提示
- 有数据->展示 共N条+渲染List列表
- 无数据->渲染NoHouse组件 (02-其他资源中准备好的NoHouse组件)
- 关闭加载提示
this.state = {
// 判断当前是否加载成功
isFinished: true
}
// 0表示不会自动关闭
Toast.loading('加载中', 0)
this.setState({
isLoadFinish: false
})
// 获取接口数据后
Toast.hide()
const { total, isFinished } = this.state
{isFinished && total === 0 && <NoHouse>没有找到相应房源</NoHouse>}
筛选条件弹窗时防止列表滚动
- 打开条件筛选框后防止列表滚动
- 提供全局样式 scrollAuto{overflow:hidden;}
- 进入页面Filter/index.js后,获取body
- 打开Picker时, 设置类名scrollAuto
- 取消或者确定时, 取消类名
// 这种方式不好使???
// onTitleClick
this.bodyDOM.className = 'scrollAuto'
// onCancel onSave
this.bodyDOM.className = ''
// componentDidMount
this.bodyDOM = window.document.body
- 当Picker显示后,房源信息布局错乱(位置移动)
- FilterPicker/index.module.css -> 添加固定定位,使之脱离标准文档流
.picker {
position: fixed;
width: 100%;
background-color: #fff;
}
<div class={styles.picker}>
{/* 选择器组件: */}
<PickerView />
{/* 底部按钮 */}
<FilterFooter />
</div>
滚动效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TMH6zqlG-1621910559450)(C:\Users\Administrator\Desktop\react\react项目-移动端\3.0列表找房\image\滚动条吸顶处理.jpg)]
封装Sticky组件固定筛选栏
- 条件筛选栏吸顶功能实现步骤:
-
封装 Sticky 组件,实现吸顶功能。
-
在 find 页面中,导入 Sticky 组件。
-
使用 Sticky 组件包裹要实现吸顶功能的 Filter 组件。
-
在 Sticky 组件中,创建两个 ref 对象(placeholder、content),分别指向占位元素和内容元素。
-
组件中,监听浏览器的 scroll 事件(注意销毁事件)。
-
在 scroll 事件中,通过 getBoundingClientRect() 方法得到筛选栏占位元素当前位置(top)。
-
判断 top 是否小于 0(是否在可视区内)。
-
如果小于,就添加需要吸顶样式(fixed),同时设置占位元素高度(与条件筛选栏高度相同)。
-
否则,就移除吸顶样式,同时让占位元素高度为 0。
-
handleScroll = () => {
// 监听窗口滚动
// 获取要操作的DOM元素
let placeholder = this.placeholder.current
let content = this.content.current
let { height } = this.props
// 获取占位元素到可视区顶部的距离
let { top } = placeholder.getBoundingClientRect()
if (top <= 0) {
// 吸顶:超出顶部边界,让筛选栏固定定位并且显示占位符
content.classList.add(styles.tofix)
placeholder.style.height = height + 'px'
} else {
// 不吸顶:筛选栏又回到边界之下,重置原来的状态
content.classList.remove(styles.tofix)
placeholder.style.height = '0px'
}
}
componentDidMount () {
// 监听页面的滚动事件
window.addEventListener('scroll', this.handleScroll)
}
componentWillUnmount () {
// 取消事件监听
window.removeEventListener('scroll', this.handleScroll)
}
<React.Fragment>
{/*占位符*/}
<div ref={this.placeholder}></div>
{/*内容组件*/}
<div ref={this.content}>{ this.props.children }</div>
</React.Fragment>
条件变化后控制列表回到顶部
- 展示数据后,修改筛选条件,回到顶部
onSave = (value, type) => {
// 回到顶部
window.scrollTo(0, 0)
// 省略...
}