react中的，（原生js和组件）上拉刷新，触底（下拉）刷新，回到顶部

由于在某些浏览器下（例如 Chrome），当窗口内嵌页面高度小于显示器高度时，`window.screenTop` 的值会比实际值偏小（通常比 `window.screenY` 小一点），因此习惯上一般使用 `window.innerHeight+window.screenY>=window.screenTop-1` 或者 `window.innerHeight+window.screenY>=d

卡科卡

1408人浏览 · 2023-12-13 11:37:41

卡科卡 · 2023-12-13 11:37:41 发布

原生js

步骤：

监听触摸事件：使用 touchstart、touchmove 和 touchend 事件来监听用户触摸事件。
获取滚动元素：通过 scrollTop 和 clientHeight 属性来获取滚动元素的垂直滚动距离和高度。
实现下拉刷新：在触摸事件中，捕获用户下拉动作，并在下拉距离超过一定阈值时，触发下拉刷新操作。可以通过添加一个 loading 元素，执行相关操作并更新数据后，刷新当前界面，完成下拉刷新。
实现上拉加载：在触摸事件中，捕获用户上拉动作，并在滚动到页面底部时触发上拉加载操作。可以通过添加一个 loading 元素，向后台请求数据并更新页面，完成上拉加载。

实现上拉加载和下拉刷新的具体实现方式非常多，这里提供其中一种示例代码：

下拉刷新

var startY = 0;    // 触摸开始位置
var moveY = 0;     // 触摸移动位置
var diffY = 0;     // 触摸垂直位移
var refresh = false;   // 是否触发下拉刷新
var distance = 50;  // 下拉刷新阈值
var content = document.querySelector('#content');  // 列表容器元素
content.addEventListener('touchstart', function (e) {
    startY = e.touches[0].clientY;
});
content.addEventListener('touchmove', function (e) {
    moveY = e.touches[0].clientY;
    diffY = moveY - startY;
    // 如果当前已经不在最顶部，或下拉距离小于等于 0，不处理下拉刷新操作
    if (content.scrollTop > 0 || diffY <= 0) {
        refresh = false;
        return;
    }
    // 如果下拉距离超过阈值，阻止页面默认刷新事件，同时触发下拉刷新事件
    if (diffY > distance) {
        e.preventDefault();
        refresh = true;
    } else {
        refresh = false;
    }
});
content.addEventListener('touchend', function (e) {
    // 如果触发下拉刷新，执行下拉刷新操作
    if (refresh) {
        // 显示 loading 图标或提示信息
        // 执行下拉刷新操作，更新列表数据
        // 隐藏 loading 图标或提示信息，显示更新时间和最新数据条数
    }
});

上拉加载更多

var loading = false;  // 是否正在加载数据
var count = 0;        // 加载次数
content.addEventListener('scroll', function (e) {
    // 获取滚动元素的垂直滚动距离和高度
    var position = content.scrollTop + content.clientHeight;
    var height = content.scrollHeight;
    // 如果当前处于底部状态且没有正在加载数据，则触发加载更多操作
    if (position >= height && !loading) {
        loading = true;
        count++;
        // 显示 loading 图标或提示信息
        // 向后台请求数据，更新列表数据或添加新数据条目
        // 隐藏 loading 图标或提示信息
        loading = false;
    }
});

需要注意的是，上述代码只是一个简单例子，实际上在实现上拉加载和下拉刷新时需要考虑到更多细节问题，比如性能优化、数据缓存、时间戳处理等等，具体实现方式需要根据实际需求和场景进行调整

触底加载结合组件和回到顶部

触底加载

使用原生js，结合ant design mobile的无限滚动

下载ant design mobile

npm install --save antd-mobile

引入InfiniteScroll组件

import { InfiniteScroll, List } from 'antd-mobile'

设定渲染列表的长度变量

  //初始我们加载4条数据
const [len, setlen] = useState(4)

对ant design mobile的实例代码进行改动，函数内我们修改为定时器，这样更直观观察效果，时间设置为两秒

`window.innerHeight+window.screenY>=window.screenTop-1`

这是一种判断浏览器是否滚动到页面底部的方法。其中，`window.innerHeight` 表示当前窗口的高度，即浏览器内嵌页面可视区域的高度，`window.screenY` 表示窗口左上角在屏幕上的纵坐标位置。而 `window.screenTop` 表示当前窗口相对于屏幕顶部的距离。

该判断表达式的含义是：当窗口内嵌页面底部（即页面全部内容的底部）与窗口底部重合时，`window.innerHeight+window.screenY` 的值应该等于 `window.screenTop`。

如果该表达式的值为 `true`，则表示页面已经滚动到底部，可以执行加载更多数据等操作。如果该表达式的值为 `false`，则表示页面还没有滚动到底部。

    const [hasMore, setHasMore] = useState(true)


const loadMoreData=()=>{
    if ( //判断当前浏览器窗口是否被缩小至了最小值
      window.innerHeight+window.screenY>=window.screenTop-1){
        setTimeout(() => {
          setlen(len + 2) //如果到底，我们增加两条数据
          setHasMore(len < list.length)
        }, 2000);
      }   
  }

infiniteScroll 组件允许自定义展示内容，这个内容可以包含任何元素，包括 svg 和带有 css 动画的元素。

 const InfiniteScrollContent = ({ hasMore }) => {
    return (
      <>
        {hasMore ? (
          <>
            <span>Loading</span>
            <DotLoading />
          </>
        ) : (
          <span>--- 我是有底线的 ---</span>
        )}
      </>
    )
  }

渲染使用组件<List>组件包括需要渲染的列表

使用slice方法确定渲染数组的长度，len变量是我们在上方设定的渲染长度

 <List >
      <div >
            {
              list.slice(0,len).map((item,index)=>{
                return <dl key={index}  >
                  <dt><img src="/imgs/5.jpg" alt="" /></dt>
                  <dd>
                    <span>{item.name}</span> 
                    <p>￥{item.price}</p>
                  </dd>
                </dl>
              })
            }
      </div>
      </List>
    //组件函数
      <InfiniteScroll loadMore={loadMoreData} hasMore={hasMore} >
      <InfiniteScrollContent hasMore={hasMore} />
      </InfiniteScroll>

以上，就是触底加载

回到顶部

在这里，我怕们使用 React 来创建回到顶部按钮。在组件中使用 state 监听页面滚动，如果用户向下滚动超过一定距离，则显示按钮，并在点击事件中将页面滚动到顶部。

     //设置一个flag来判断页面是否滚动
const [ShouldScrollToTop,setShouldScrollToTop] = useState(false)

 useEffect(()=>{
    const handleScroll = () => {
      const scrollTop = window.scrollY;
      const shouldScroll = scrollTop > 0;
      setShouldScrollToTop(shouldScroll);
    };
  
    window.addEventListener('scroll', handleScroll);
  
    return () => {//记得移除监听事件
      window.removeEventListener('scroll', handleScroll);
    };
  },[])

设置一个触发事件，来触发回到顶部函数，在这里以vant组件库的悬浮球为例

引入组件库，更改触发事件

<FloatingBall
      className='demo-floating-box-menu'
      offset={{
        right: 20,
        bottom: '14vh',
      }}
      menu={{
        items: icons.map((Ico, i) => (
          <Flex
            align='center'
            justify='center'
            onClick={() =>{handleball(i)}} //点击时触发事件
            key={i}
            className='menu-item'
          >
            <Ico />
          </Flex>
        )),
      }}
    >
      {({ active }) => (
        <Flex
          align='center'
          justify='center'
          className='menubtn'
        >
          <Plus />
        </Flex>
      )}
    </FloatingBall>

触发函数

`window.scrollTo({ top: 0, behavior: "smooth" });` 是一种使用 JavaScript 在浏览器中平滑滚动到页面顶部的方法。

当调用这个语句时，它会将窗口滚动到页面顶部。`top: 0` 表示滚动到窗口顶部的位置，`behavior: "smooth"` 则指定了滚动的行为为平滑滚动。

behavior有两个属性，‘auto’是默认值，表示使用浏览器的默认滚动行为。‘smooth’是表示使用平滑滚动行为，使滚动过程变得更加流畅。

这样的平滑滚动效果会在一定的时间间隔内进行逐渐滚动，而不是瞬间跳跃到顶部。这种平滑的滚动给用户更好的视觉体验和流畅度。

请注意，平滑滚动行为在某些较老版本的浏览器中可能不被支持。在不支持平滑滚动的浏览器中，页面会以默认的瞬间滚动方式回到顶部。

     const handleball=(i)=>{
            console.log(i);
            if(i == 0){
                //触发滚动
                window.scrollTo({ top: 0, behavior: 'smooth' });
              }else if (i == 1) {
                //回到首页
                navigate('/home')
              }
      }