您好，关于antd-design-mobile infinitescroll 无限滚动 无法滚动问题

[翠翠草原]

Version of antd-mobile

5.7.2

Operating system and its version

Android, Others

Browser and its version

Edge 125.0.2535.51 (正式版本)

Sandbox to reproduce

想要解决无限滚动问题

What happened?

您好我这个无限滚动还没有生效，不知道什么情况出现问题呢？另一个是上拉刷新报错

Relevant log output

import "./style.scss"
import { RootState } from "@/store"
import { getLoadArticle, getNewsLoadArticle } from "@/store/modules/home"
import { InfiniteScroll, List, PullToRefresh, Image } from "antd-mobile"
import { useState } from "react"
import { useDispatch, useSelector } from "react-redux"

type Props = {
  channelId: number
}
const ArticleList = ({channelId}: Props) => {
  const dispatch = useDispatch()
  const { channelArticle } = useSelector((state: RootState) => state.home)
  const currentChannelArticle = channelArticle[channelId]?.list || []
  const [hasMore, setHasMore] = useState(true)
  const [loaddir, setLoaddir] = useState(1)
  const [minBehotTime, setMinBehotTime] = useState(new Date().getTime())

  const channelIdToTag: { [key: number]: number | string } = {
    0: "__dyna__",
    1: "__all__",
    2: 1,
    3: 6,
    4: 2,
    5: 3,
    6: 4,
    7: 5,
    8: 0
  }

  const getTag = (channelId: number) => {
    return channelIdToTag[channelId] || 0
  }

  const fetchData = async (loadMore = false) => {
    const params = {
      loaddir,
      index: channelId,
      tag: getTag(channelId),
      size: 10,
      maxBehotTime: 0,
      minBehotTime: loadMore ? minBehotTime : 20000000000000
    }
    if (loadMore) {
      await dispatch(getNewsLoadArticle(params))
    } else {
      await dispatch(getLoadArticle(params))
    }
  }
  
  // 下拉加载更多数据
  const onRefresh = async () => {
    setLoaddir(0)
    setMinBehotTime(new Date().getTime())
    await fetchData()
  }

  // 加载更多数据的函数
  const loadMore = async () => {
    if (hasMore) {
      setLoaddir(loaddir + 1)
      await fetchData(true)
      setHasMore(false)
    }
  }
  
  return (
    <div>
      <PullToRefresh onRefresh={onRefresh}>
        {/* 文章列表中的每一项 */}
        <List>
          {currentChannelArticle.map((item: any) => (
            <List.Item
              onClick={() => {}}
              key={item.articleId}
              extra={
                <Image src={item.articleImages} fit="cover" width={89} height={79} />
              }
              title={
                <>
                  <Image src={item.authorAvatar} fit="cover" style={{ borderRadius: 50, marginRight: 8 }} width={18} height={18} />
                  <span style={{ color: "#555570" }}>{ item.authorName }</span>
                </>
              }
              description={item.publishTime}
              >
                {item.articleTitle}
            </List.Item>
          ))}
        </List>
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </PullToRefresh>
    </div>
  )
}
export default ArticleList


我这个执行没有报错，不过上拉刷新时候有报错（上面图有的）

[Heap]

https://codesandbox.io/p/sandbox/pedantic-keldysh-pzs49w?file=%2Fapp.tsx&resolutionHeight=700&resolutionWidth=375 写个demo看一下，盲猜你这个应该不是组件上的问题

[翠翠草原]

https://codesandbox.io/p/sandbox/pedantic-keldysh-pzs49w?file=%2Fapp.tsx&resolutionHeight=700&resolutionWidth=375 写个demo看一下，盲猜你这个应该不是组件上的问题

看了，还是也不行啊

[Heap]

不是喊你看我这个，是说你写一个demo出来我看一下是什么问题

[二货爱吃白萝卜]

给个重现看看，贴图是看不出问题的。可能是业务逻辑问题不能滚、也可能是特定浏览器不行。可能性太多了

[翠翠草原]

不是喊你看我这个，是说你写一个demo出来我看一下是什么问题

我这个写了刷新组件和上拉滚动组件，你没给我写出来呢

[Heap]

不是喊你看我这个，是说你写一个demo出来我看一下是什么问题

我这个写了刷新组件和上拉滚动组件，你没给我写出来呢

不是我给你写，是你自己写一下，我们好看看是啥问题导致了不生效的问题，我去哪给你弄你代码里面的RootState 去呀

[翠翠草原]

不是喊你看我这个，是说你写一个demo出来我看一下是什么问题

我这个写了刷新组件和上拉滚动组件，你没给我写出来呢

不是我给你写，是你自己写一下，我们好看看是啥问题导致了不生效的问题，我去哪给你弄你代码里面的RootState 去呀

[二货爱吃白萝卜]

给个重现看看，贴图是看不出问题的。可能是业务逻辑问题不能滚、也可能是特定浏览器不行。可能性太多了

不要提供截图，是在线重现哈。参考 @yezhonghu0503 评论里的 codesandbox

[github-actions]

Hi, Verdant-Grassland.

Please provide a online reproduction so that we can help you troubleshoot the problem. You can create a demo by codesandbox or stackblitz.

我们需要你提供一个在线的重现实例，以便于我们帮你排查问题。你可以通过 codesandbox 或 stackblitz 创建一个实例。