vantui
vantui copied to clipboard
PullToRefresh 与 VitrualList一起使用 报错 Cannot read properties of undefined (reading 'scrollTop') 同时 下拉刷新也不生效
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行元素是否一定能占满整个容器