文件名称:gifs-r-us:您需要的所有GIF都在Gifs-R-Us
文件大小:218KB
文件格式:ZIP
更新时间:2024-03-07 17:54:09
gifs giphy giphy-api TypeScript
Gifs-R-Us :party_popper: 一个基于GIF浏览器。 在本地运行 该应用程序是使用构建的,可以根据CRA的设置运行: yarn install yarn start 网格 网格使用布局,其列宽为200px,自动行数为10px高。 趋势和搜索页面使用固定高度的GIF,因此为GIF分配了固定的行数,四舍五入到最接近的10像素,以便浏览器可以在调整窗口大小时处理列。 资料载入 循环-> 趋势/搜索页面检查scrollY + clientHeight是否在可滚动高度底部的offset之内 不在底部offset范围内吗? 结尾 请求从offset开始的下一个GIF块 取回返回时更新offset ,触发LOOP的开始 <-结束 窗口上的滚动侦听器从LOOP的顶部开始 卸载页面会删除滚动侦听器并取消所有运行中的请求 笔记 搜索和趋势页面最终在数据加载方面非常相似,理想情况下可以将其分解为一个通用的钩
【文件预览】:
gifs-r-us-master
----.gitignore(310B)
----package.json(2KB)
----src()
--------Navbar.tsx(2KB)
--------react-app-env.d.ts(40B)
--------Gif.tsx(2KB)
--------GiphyApiConstants.ts(104B)
--------setupTests.ts(255B)
--------App.css(816B)
--------Gif.css(300B)
--------store()
--------index.tsx(481B)
--------App.test.tsx(280B)
--------pages()
--------types.ts(3KB)
--------serviceWorker.ts(5KB)
--------App.tsx(1KB)
----LICENSE(1KB)
----public()
--------robots.txt(67B)
--------logo192.png(5KB)
--------index.html(2KB)
--------favicon.ico(3KB)
--------manifest.json(501B)
--------logo512.png(9KB)
----tsconfig.json(491B)
----.prettierrc.js(21B)
----README.md(2KB)
----yarn.lock(475KB)