Framework7无限滚动无限滚动|Framework7

本文概述

在顶部添加无限滚动
无限滚动事件
Framework7无限滚动示例

当页面靠近底部时, 当你要加载其他内容并执行所需的操作时, 将使用“无限滚动”。
句法：

< div class = "page"> < div class = "page-content infinite-scroll" data-distance = "100"> ...< /div> < /div>

这里：
页面内容无限滚动：用于无限滚动容器。
data-distance：此属性用于配置距页面底部的距离（以px为单位）以触发无限滚动事件, 其默认值为50px。
在顶部添加无限滚动你还可以在页面顶部使用无限滚动, 只需要向“页面内容”添加其他“无限滚动顶部”类。

< div class = "page"> < div class = "page-content infinite-scroll infinite-scroll-top"> ...< /div> < /div>

无限滚动事件无限：用于在页面滚动到达底部指定距离时触发。它将通过div class =“ page-content infinite-scroll”作为目标。
有两种可与无限滚动容器一起使用的App方法：
要将无限滚动事件侦听器添加到指定的HTML容器, 请使用以下方法：

myApp.attachInfiniteScroll(container)

你可以使用以下方法从指定的HTML容器中删除无限滚动事件侦听器：

myApp.detachInfiniteScroll(container)

在此, 参数是用作无限滚动容器的HTMLElement或字符串的必需选项。
Framework7无限滚动示例让我们以一个示例来演示无限滚动, 该无限滚动在页面滚动接近底部时加载其他内容：

< !DOCTYPE html> < html> < head> < meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> < meta name="apple-mobile-web-app-capable" content="yes" /> < meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> < title> infinite_scroll< /title> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> < /head> < body> < div class = "views"> < div class = "view view-main"> < div class = "navbar"> < div class = "navbar-inner"> < div class = "left"> < /div> < div class = "center sliding"> Infinite Scroll< /div> < div class = "right"> < /div> < /div> < /div> < div class = "pages navbar-through"> < div data-page = "home" class = "page"> < div class = "page-content infinite-scroll"> < div class = "list-block"> < ul> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 1< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 2< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 3< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 4< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 5< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 6< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 7< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 8< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 9< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 10< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 11< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 12< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 13< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 14< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 15< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 16< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 17< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 18< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 19< /div> < /div> < /li> < li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item 20< /div> < /div> < /li> < /ul> < /div> < div class = "infinite-scroll-preloader"> < div class = "preloader"> < /div> < /div> < /div> < /div> < /div> < /div> < /div> < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"> < /script> < style> .infinite-scroll-preloader {margin-top:-20px; margin-bottom:10px; text-align:center; }.infinite-scroll-preloader .preloader {width:34px; height:34px; }< /style> < script> var myApp = new Framework7(); var $$ = Dom7; // Loading flagvar loading = false; // Last loaded indexvar lastIndex = $$('.list-block li').length; // Max items to loadvar maxItems = 60; // Append items per loadvar itemsPerLoad = 20; // Attach 'infinite' event handler$$('.infinite-scroll').on('infinite', function () {// Exit, if loading in progressif (loading) return; // Set loading flagloading = true; // Emulate 1s loadingsetTimeout(function () {// Reset loading flagloading = false; if (lastIndex > = maxItems) {// Nothing more to load, detach infinite scroll events to prevent unnecessary loadingsmyApp.detachInfiniteScroll($$('.infinite-scroll')); // Remove preloader$$('.infinite-scroll-preloader').remove(); return; }// Generate new items HTMLvar html = ''; for (var i = lastIndex + 1; i < = lastIndex + itemsPerLoad; i++) {html += '< li class = "item-content"> < div class = "item-inner"> < div class = "item-title"> Item ' + i + '< /div> < /div> < /li> '; }// Append new items$$('.list-block ul').append(html); // Update last loaded indexlastIndex = $$('.list-block li').length; }, 1000); }); < /script> < /body> < /html>

【Framework7无限滚动】立即测试