AntmJS / vantui

基于vant-weapp实现的Taro-React版及H5-React版组件库https://antmjs.github.io/vantui/#/home

Home Page:https://antm-js.gitee.io/vantui/#/home

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

CooLNuanfeng opened this issue · comments

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"

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