infinite-scroll 相关问题

无限滚动，也称为无限滚动，是一种广泛用于网站和Web应用程序的技术，它们在传统上使用分页的页面上托管大量内容。无限滚动涉及最初只加载一页内容。当用户向下滚动时，浏览器通过AJAX请求获取另一个页面。有几个Infinite Scrolling插件可以在现代浏览器中使用这种技术。

Jetpack compose - 加载更多数据或分页，LazyVerticalStaggeredGrid/LazyColumn 消失

每当 LazyVerticalStaggeredGrid/LazyColumn 到达末尾/最后一项时，我都会实现分页或加载更多数据。一切都按预期工作，但是，当数据加载更多功能时，

kotlin pagination android-jetpack-compose infinite-scroll lazycolumn

回答 1 投票 0

使用 Ajaxate 的 Shopify 无限滚动在应用过滤器后停止工作

{% 如果模板包含“集合”%} document.addEventListener("DOMContentLoaded", function() { var 无休止的滚动 = 新的 Ajaxate({ 容器：'#product-grid...</desc> <question vote="0"> <pre><code> {% if template contains 'collection' %} <script> document.addEventListener("DOMContentLoaded", function() { var endlessScroll = new Ajaxinate({ container: '#product-grid', pagination: '#Huratips-Pagination', loadingText: `<div class="loading" style="text-transform: uppercase; padding-bottom: 40px; padding-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;"> <span style="height: 30px; width: 30px; background-repeat: no-repeat; background-size: contain; display: inline-block; background-image: url(https://cdn.shopify.com/s/files/1/0691/4221/6959/files/loader-black.svg?v=1712406692);"></span> <span>Loading more products</span> </div>` }); }); </script> {% endif %} </code></pre> <p>我已经在我的shopify商店上编写了用于无限滚动的代码，但是在应用排序或过滤器后，该代码停止工作，可能我认为这是由于当我们在shopify中应用排序或过滤时，它会重新加载类下的内容。 Product-grid-container 并替换整个 html，这就是为什么 #product-grid 及其内容是新的，因此它在应用排序或过滤后停止工作，有什么方法可以处理这种情况吗？</p> <p><a href="https://i.stack.imgur.com/ITYXJ.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL0lUWVhKLnBuZw==" alt=""/></a></p> <p>在这张图片中，我展示了重新加载 .product-grid-container .collection 下的整个内容，我在 shopify 中使用聚光灯主题。</p> <p>提前感谢您的帮助..:)</p> </question> <answer tick="false" vote="0"> <p>看来你的分析是正确的。当您在 Shopify 中应用排序或过滤时，ID 为 #product-grid 的容器内的内容将被替换，这会破坏 Ajaxate 设置的功能，因为新内容没有附加必要的事件侦听器。</p> <p>要处理这种情况，您需要在应用排序或过滤后重新初始化 Ajaxate。您可以通过监听排序或过滤机制触发的事件来完成此操作，然后在这些事件发生时重新初始化 Ajaxate。</p> <p>以下是如何修改代码来实现此目的：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>{% if template contains 'collection' %} <script> document.addEventListener("DOMContentLoaded", function() { // Function to initialize Ajaxinate function initializeAjaxinate() { var endlessScroll = new Ajaxinate({ container: '#product-grid', pagination: '#Huratips-Pagination', loadingText: `<div class="loading" style="text-transform: uppercase; padding-bottom: 40px; padding-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;"> <span style="height: 30px; width: 30px; background-repeat: no-repeat; background-size: contain; display: inline-block; background-image: url(https://cdn.shopify.com/s/files/1/0691/4221/6959/files/loader-black.svg?v=1712406692);"></span> <span>Loading more products</span> </div>` }); } // Initialize Ajaxinate on page load initializeAjaxinate(); // Listen for events that indicate sorting or filtering is applied // Assuming you have some sort of event that triggers after sorting/filtering // Replace 'your-sorting-event' with the actual event name document.addEventListener('your-sorting-event', function() { // Reinitialize Ajaxinate after sorting or filtering is applied initializeAjaxinate(); }); }); </script> {% endif %}</code></pre> </div> </div> <p></p> <p>将“your-sorting-event”替换为 Shopify 在应用排序或过滤后使用的实际事件名称或触发器。如果您使用 JavaScript 来处理排序/过滤，这可能是自定义事件；如果您使用的是 Shopify 库或框架，则它可能是由 Shopify 库或框架提供的事件。</p> <p>这样，每次应用排序或过滤时，Ajaxate 都会重新初始化，确保即使在内容被替换后，无限滚动也能继续工作。</p> </answer> </body></html>

javascript ajax shopify infinite-scroll spotlight

回答 0 投票 0

安装“react-infinite-scroller”并启动反应服务器时出错

Webpack加载器出错。我已经安装了“react-infinite-scroller”来在项目中构建聊天应用程序。之后

reactjs webpack infinite-scroll react-infinite-scroll-component react-infinite-scroll

回答 1 投票 0

通过在线API实现无限滚动功能

我正在使用YTS API，我想制作无限滚动功能。有一个页面参数和限制参数。似乎它可以与他们一起使用，但我不知道如何使用它。我是初学者...

javascript reactjs infinite-scroll

回答 2 投票 0

添加无限滚动回调函数

我有一个 tumblr，我在其中根据图像出现的帖子大小加载不同的 url，使用 javascript 和 tumblr 的主题运算符 {photoUrl-250}、{photoUrl-400} 等。用户 b ...

javascript jquery tumblr getelementbyid infinite-scroll

回答 1 投票 0

通过htmx中动态递增页面加载无限表格

我在 htmx.org 上使用无限滚动示例设置了一个表格。初始 hx-get 设置为 /new?limit=10&page=1 之类的值。 /new 句柄填充数据并显示 page=1，并且...

infinite-scroll htmx

回答 1 投票 0

“react-infinite-scroll-component”不触发下一个函数

我正在使用react-infinite-scroll-component来实现无限滚动组件。该组件的配置为：我正在使用react-infinite-scroll-component来实现无限滚动组件。组件的配置为： <div id="scrollableDiv" style={{ height: 300, overflow: "auto" }}> <InfiniteScroll dataLength={texts.length} next={getText} hasMore={true} loader={<h5>Loading...</h5>} endMessage={<p style={{textAlign:'center'}}><b>Yay! You've seen it all!</b></p>} scrollableTarget="scrollableDiv" > {<Texts texts = {texts}/>} </InfiniteScroll> </div> 其中 texts 只是一些文本对象的状态数组； const [texts, setTexts] = useState([]) 这是在 next 中调用的 getText 方法： const getText = async ()=>{ const res = await axios.get("http://localhost:3001/api/sth",{ params: { ids: followings.map(i => i.id), str_ids: followings.map(i => i.str_id) }, paramsSerializer: params => { return qs.stringify(params) } }); let str_ids_res = res.data.map(i => i.string_id) let texts_res = res.data.map(i => i.texts) console.log(texts_res) const filtered_res = //some processing here on texts_res /* eslint eqeqeq: 0 */ if(!arrayIsEqual(filtered_res,texts)){ console.log("Not equal") // append arrays to a array state setTexts((prevtexts) => prevtexts.concat([...filtered_res])) } } await axios.get("http://localhost:3001/api/sth") 总是从数据库返回两个不同的文本，所以setTexts应该总是被调用。组件是来自语义 UI 的卡片组件。 const Texts = ({texts}) =>{ return ( <> {texts.map(text =>( <div key={text.id}> <Card> <Card.Content> <Card.Description> {text.full_text} </Card.Description> </Card.Content> </Card> </div> ))} </> ); } 即使我的 InfiniteScroll 变量设置正确，Next 组件也只会触发 datalength 一次。附言。文本最初是空的，所以当我启动应用程序时，只会调用“正在加载...” 经过一些实验，将 height = {some height} 作为 props 传递给 InfiniteScroll 就可以了.. <div id="scrollableDiv" style={{ height: 300, overflow: "auto" }}> <InfiniteScroll dataLength={tweets.length} next={handleScrolling} hasMore={!isEnd} loader={<h5>Loading...</h5>} scrollThreshold={1} height={300} endMessage={ <p style={{textAlign:'center'}}><b>Yay! You've seen it all!</b></p> } scrollableTarget="scrollableDiv" > {<Tweets tweets = {tweets}/>} </InfiniteScroll> </div> 请不要使用空数组初始化“texts”，您必须使用一些对象数组（例如 10 或 20）初始化“texts”数组。在代码的初始渲染中（第一次）。你可以直接在中触发一个API useEffect(()=>{ // make API call which your firing in the next call function },[]) 因此您的组件进行初始化，然后它将开始按预期运行。为了便于理解，请参考“代码沙箱”中的示例 https://codesandbox.io/s/elated-danny-k4hylp?file=/src/index.js 我有问题，在开发中无限滚动有效，但在生产中不行，我的意思是，下一个功能在生产中不会触发，但在开发中正常工作，有类似的问题吗？

javascript reactjs infinite-scroll react-infinite-scroll-component

回答 3 投票 0

创建无限水平滚动（如Ring）

我正在尝试制作一个具有水平子级并从左向右移动的容器每个子元素，当它到达容器的末尾时 => 到达容器的开头 ...

javascript css animation frontend infinite-scroll

回答 1 投票 0

在无限div内水平堆叠div

我正在尝试创建本质上是一个水平、无限滚动的 div（直到内部内容宽度）。我想在所述容器内堆叠其他 div，它们将漂浮在每个 ot 旁边......

html css infinite-scroll

回答 1 投票 0

React Native 存在 RTK 查询分页问题

我有一个 React Native 移动应用程序，我正在尝试使用 RTK 查询管理 API 请求。在“产品”屏幕上，我使用 getProducts（无限滚动）获取并显示数据。在显示...