AntmJS / vantui

基于vant-weapp实现的Taro-React版及H5-React版组件库https://antmjs.github.io/vantui/#/home
https://antm-js.gitee.io/vantui/#/home
MIT License
740 stars 97 forks source link

无限滚动->虚拟列表->回到顶部 数据会隐藏 #628

Open taojinbo1990 opened 5 months ago

taojinbo1990 commented 5 months ago

image

这个 Issue 涉及以下平台:

BUG 描述 官方文档 无限滚动 回到顶部 复现步骤

期望结果

实际结果

截图

环境

附加信息

liamyu commented 3 months ago

+1,在小程序模拟器里点击回到顶部列表会空白,再滑动一下列表内容又出现了,但是在底部,没有回到顶部

  "name": "art-x",
  "version": "1.0.0",
  "private": true,
  "description": "我的项目",
  "templateInfo": {
    "name": "default",
    "typescript": true,
    "css": "Sass",
    "framework": "React"
  },
  "scripts": {
    "build:weapp": "taro build --type weapp",
    "build:swan": "taro build --type swan",
    "build:alipay": "taro build --type alipay",
    "build:tt": "taro build --type tt",
    "build:h5": "taro build --type h5",
    "build:rn": "taro build --type rn",
    "build:qq": "taro build --type qq",
    "build:jd": "taro build --type jd",
    "build:quickapp": "taro build --type quickapp",
    "build:harmony-hybrid": "taro build --type harmony-hybrid",
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch",
    "dev:qq": "npm run build:qq -- --watch",
    "dev:jd": "npm run build:jd -- --watch",
    "dev:quickapp": "npm run build:quickapp -- --watch",
    "dev:harmony-hybrid": "npm run build:harmony-hybrid -- --watch",
    "test": "jest",
    "postinstall": "weapp-tw patch"
  },
  "browserslist": [
    "last 3 versions",
    "Android >= 4.1",
    "ios >= 8"
  ],
  "author": "",
  "dependencies": {
    "@antmjs/vantui": "^3.4.1",
    "@babel/runtime": "^7.21.5",
    "@reduxjs/toolkit": "^2.2.5",
    "@tarojs/components": "3.6.30",
    "@tarojs/helper": "3.6.30",
    "@tarojs/plugin-framework-react": "3.6.30",
    "@tarojs/plugin-platform-alipay": "3.6.30",
    "@tarojs/plugin-platform-h5": "3.6.30",
    "@tarojs/plugin-platform-harmony-hybrid": "3.6.30",
    "@tarojs/plugin-platform-jd": "3.6.30",
    "@tarojs/plugin-platform-qq": "3.6.30",
    "@tarojs/plugin-platform-swan": "3.6.30",
    "@tarojs/plugin-platform-tt": "3.6.30",
    "@tarojs/plugin-platform-weapp": "3.6.30",
    "@tarojs/react": "3.6.30",
    "@tarojs/runtime": "3.6.30",
    "@tarojs/shared": "3.6.30",
    "@tarojs/taro": "3.6.30",
    "@types/react-redux": "^7.1.33",
    "js-base64": "^3.7.7",
    "js-md5": "^0.8.3",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-redux": "^9.1.2",
    "taro-ui": "^3.1.0-beta.2"
  },
  "devDependencies": {
    "@babel/core": "^7.8.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
    "@tarojs/cli": "3.6.30",
    "@tarojs/taro-loader": "3.6.30",
    "@tarojs/test-utils-react": "^0.1.1",
    "@tarojs/webpack5-runner": "3.6.30",
    "@types/jest": "^29.3.1",
    "@types/node": "^18.15.11",
    "@types/react": "^18.0.0",
    "@types/webpack-env": "^1.13.6",
    "@typescript-eslint/eslint-plugin": "^6.2.0",
    "@typescript-eslint/parser": "^6.2.0",
    "autoprefixer": "^10.4.19",
    "babel-plugin-import": "^1.13.8",
    "babel-preset-taro": "3.6.30",
    "eslint": "^8.12.0",
    "eslint-config-taro": "3.6.30",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-react": "^7.8.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "jest": "^29.3.1",
    "jest-environment-jsdom": "^29.5.0",
    "postcss": "^8.4.38",
    "react-refresh": "^0.11.0",
    "stylelint": "^14.4.0",
    "tailwindcss": "^3.4.3",
    "ts-node": "^10.9.1",
    "tsconfig-paths-webpack-plugin": "^4.1.0",
    "typescript": "^5.1.0",
    "weapp-tailwindcss": "^3.2.1",
    "webpack": "5.78.0"
  }
}
zuolung commented 1 month ago

文档案例有误,需要传id

<PullToRefresh onRefresh={onRefresh}>
      <VirtualList
        style={{ padding: 10, boxSizing: 'border-box' }}
        height="calc(100vh - 135px)"
        dataSource={data}
        showCount={3}
        ref={VirtualListInstance}
        footer={
          <InfiniteScroll
            parentClassName="van-virtual-list"
            loadMore={loadMore}
            ref={InfiniteScrollInstance}
          />
        }
        ItemRender={react.memo(({ item, id }) => {
          return (
            <View
              className={`van-demo-goods-item-wrapper`}
              key={item.image}
              id={id}
            >
              <View className="van-demo-goods-item">
                <TaroImage key={item.image} src={item.image} className="img" />
                <View className="title">{item.title}</View>
                {item.isCutPrice && (
                  <Text className="cutPrice">最近大降价</Text>
                )}
                <View className="price">{item.price}</View>
              </View>
            </View>
          )
        })}
      />
    </PullToRefresh>