列表找房（十）04-行数据加载提示 & 整页加载提示 & 筛选条件弹窗时防止列表滚动 & 封装Sticky组件固定筛选栏 & 条件变化后控制列表回到顶部-window.scrollTo(0, 0)

行数据加载提示 & 整页加载提示 & 筛选条件弹窗时防止列表滚动 & 封装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)
  // 省略...   
}