{"id":13741633,"url":"https://github.com/raxjs/appear-polyfill","last_synced_at":"2025-05-16T05:31:15.150Z","repository":{"id":42533020,"uuid":"202054542","full_name":"raxjs/appear-polyfill","owner":"raxjs","description":null,"archived":false,"fork":false,"pushed_at":"2023-02-14T08:22:31.000Z","size":107,"stargazers_count":14,"open_issues_count":4,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-03T20:43:13.313Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/raxjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-08-13T03:14:04.000Z","updated_at":"2023-12-29T08:04:19.000Z","dependencies_parsed_at":"2023-02-16T03:40:13.704Z","dependency_job_id":null,"html_url":"https://github.com/raxjs/appear-polyfill","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raxjs%2Fappear-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raxjs%2Fappear-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raxjs%2Fappear-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raxjs%2Fappear-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raxjs","download_url":"https://codeload.github.com/raxjs/appear-polyfill/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254474015,"owners_count":22077202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T04:01:01.127Z","updated_at":"2025-05-16T05:31:10.140Z","avatar_url":"https://github.com/raxjs.png","language":"JavaScript","funding_links":[],"categories":["Rax"],"sub_categories":["Rax Tools"],"readme":"[![npm](https://img.shields.io/npm/v/rax-appear.svg)](https://www.npmjs.com/package/rax-appear)\n\n**描述：**\n封装了组件 Appear 和 Disappear 的监听。\n\n## 安装\n\n```bash\n$ npm install appear-polyfill --save\n```\n\n## 示例\n\n\n```jsx\nimport { createElement, render } from 'rax';\nimport * as DriverDOM from 'driver-dom';\nimport { isWeb } from 'universal-env';\nimport { setupAppear } from 'appear-polyfill';\n\nif (isWeb) {\n  setupAppear(window);\n}\n\nconst list = [];\nfor (let index = 1; index \u003c= 100; index++) {\n  list.push(index);\n}\n\nrender((\n  \u003cdiv\u003e\n    {list.map((item) =\u003e {\n      return (\n        \u003cdiv\n          style={{\n            height: 100,\n            backgroundColor: '#ccc',\n            marginBottom: 20,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n          onAppear={(event) =\u003e {\n            console.log('appear: ', item, event.detail.direction);\n          }}\n          onDisappear={() =\u003e {\n            console.log('disappear: ', item, event.detail.direction);\n          }}\n        \u003e\n          第 {item} 个\n        \u003c/div\u003e\n      );\n    })}\n  \u003c/div\u003e\n), document.body, { driver: DriverDOM });\n```\n## 配置项\n\n**preAppear**\n\n- 类型：`string`\n\n支持预加载浏览器视口底部更多偏移的内容，单位 `px`。为需要预加载的元素设置 `preappear` 事件。\n\n```jsx\nimport { createElement, render } from 'rax';\nimport DriverUniversal from 'driver-universal';\nimport Image from 'rax-image';\n\nimport { setupAppear } from 'appear-polyfill';\n\nif (isWeb) {\n  setupAppear(window, {\n    preAppear: '0px 0px 100px 0px'\n  });\n}\n\nconst App = () =\u003e {\n  const rendderImage = () =\u003e (\n    \u003cImage\n      onPreappear={(e) =\u003e { console.log(e); }}\n      source={{\n        uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png',\n      }}\n      style={{\n        height: 300,\n        width: '100%',\n      }}\n    /\u003e\n  );\n  return (\n    \u003cdiv\u003e\n      {\n        new Array(10).map(rendderImage)\n      }\n    \u003c/div\u003e\n  );\n};\n\nrender(\u003cApp /\u003e, document.body, { driver: DriverUniversal });\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraxjs%2Fappear-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraxjs%2Fappear-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraxjs%2Fappear-polyfill/lists"}