We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
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"
The text was updated successfully, but these errors were encountered:
showCount={3}, 6行元素是否一定能占满整个容器
Sorry, something went wrong.
No branches or pull requests
The text was updated successfully, but these errors were encountered: