Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PullToRefresh 与 VitrualList一起使用 报错 Cannot read properties of undefined (reading 'scrollTop') 同时 下拉刷新也不生效 #584

Open
CooLNuanfeng opened this issue Nov 8, 2023 · 1 comment

Comments

@CooLNuanfeng
Copy link

CooLNuanfeng commented Nov 8, 2023

import react from 'react'
import { View, Text } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import {
  PullToRefresh,
  VirtualList,
  InfiniteScroll,
  InfiniteScrollInstance,
  IVirtualListInstance,
  InfiniteScrollProps,
  IPullToRefreshProps,
  Button,
} from '@antmjs/vantui'
import AwardItem from '@/components/awardItem'
import { mockGoods } from '@/api/index'

import './index.scss'




export default function Index() {
  const [listData, setListData] = react.useState<any[]>([])
  const InfiniteScrollInstanceRef = react.useRef<InfiniteScrollInstance>({})
  const VirtualListInstanceRef = react.useRef<IVirtualListInstance>({})

  const loadMore: InfiniteScrollProps['loadMore'] = async () => {
    console.log('loadMore')
    return new Promise(async (resolve) => {
      const reslult = await mockGoods()
      const newData = listData.concat(reslult)
      console.log('loadMore',newData)
      if(newData.length > 50){
        resolve('complete')
      }else{
        setListData(newData.map((item,index) => ({
          index,
          ...item
        })))
        resolve('loading')
      }
    })
  }

  const onRefresh: IPullToRefreshProps['onRefresh'] = () => {
    return new Promise(async (resolve) => {
      InfiniteScrollInstanceRef.current?.reset()
      const reslult = await mockGoods()
      await VirtualListInstanceRef.current?.reset()
      setListData(reslult)
      resolve(undefined)
    })
  }

  useLoad(() => {
    console.log('Page loaded.')
  })


  return (
    <View className='home-warp'>
      <View className='home-nav'>
        <View className='home-logo'>
          <View className='logo-text'>Title</View>
          <View className='logo-slogn'>title description</View>
        </View>
        <View className='home-user'>
          <Button plain hairline type='primary' size='small'>登录/注册</Button>
          {/* <View className='user-avatar'>
            <View className='user-dot'></View>
            <Text>HF</Text>
          </View> */}
        </View>
      </View>
      <View className='home-main'>
        <PullToRefresh onRefresh={onRefresh}>
          <VirtualList
            height='calc(100vh - 50px)'
            dataSource={listData}
            showCount={3}
            ref={VirtualListInstanceRef}
            footer={
              <InfiniteScroll
                parentClassName='home-main'
                loadMore={loadMore}
                ref={InfiniteScrollInstanceRef}
              />
            }
            ItemRender={react.memo(({ item }) => {
              return (
                <AwardItem key={item.index} item={item} />
              )
            })}
            renderBackToTop={false}
          />
        </PullToRefresh>
      </View>
    </View>
  )
}


`


## bug说明

下拉刷新效果没有,滚动时会报 Cannot read properties of undefined (reading 'scrollTop') 
如果把   height='calc(100vh - 50px)' 改成 height="100%" (.home-main 的高度也是 100% , 不会报错(Cannot read properties of undefined (reading 'scrollTop') )但 loadMore 失效,只能加载第一页或者更确切的是加载 2倍的 showCount 个,能触发loadMore但视图不更新

## 版本信息
"@antmjs/vantui": "^3.2.2",
    "@babel/runtime": "^7.21.5",
    "@tarojs/components": "3.6.18",
    "@tarojs/helper": "3.6.18",
    "@tarojs/plugin-framework-react": "3.6.18",
    "@tarojs/plugin-platform-alipay": "3.6.18",
    "@tarojs/plugin-platform-h5": "3.6.18",
    "@tarojs/plugin-platform-jd": "3.6.18",
    "@tarojs/plugin-platform-qq": "3.6.18",
    "@tarojs/plugin-platform-swan": "3.6.18",
    "@tarojs/plugin-platform-tt": "3.6.18",
    "@tarojs/plugin-platform-weapp": "3.6.18",
    "@tarojs/react": "3.6.18",
    "@tarojs/runtime": "3.6.18",
    "@tarojs/shared": "3.6.18",
    "@tarojs/taro": "3.6.18",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
@zuolung
Copy link
Contributor

zuolung commented Feb 1, 2024

showCount={3}, 6行元素是否一定能占满整个容器

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants