javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(content, reorder-group, header, footer, infinite-scroll, refresher): add custom scroll target to improve compatibility with virtual scroll (#24883)

Browse Source 
Resolves #23437
This commit is contained in:
Sean Perkins
2022-03-15 11:47:46 -04:00
committed by GitHub
parent 171020e9d2
commit 2a438da010
38 changed files with 1303 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/src/components/infinite-scroll/test/basic/index.html
View File

@ -16,7 +16,6 @@
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Infinite Scroll - Basic</ion-title>

35
core/src/components/infinite-scroll/test/scroll-target/e2e.ts Normal file
View File

@ -0,0 +1,35 @@
import { newE2EPage } from '@stencil/core/testing';
import type { E2EPage } from '@stencil/core/testing';
import { scrollToBottom } from '@utils/test';
/**
* Scrolls an `ion-content` element to the bottom, triggering the `ionInfinite` event.
* Waits for the custom event to complete.
*/
async function scrollPage(page: E2EPage) {
await scrollToBottom(page, '#scroll-target');
await page.waitForChanges();
const ev = await page.spyOnEvent('ionInfiniteComplete', 'document');
await ev.next();
}
describe('infinite-scroll: custom scroll target', () => {
it('should load more items when scrolled to the bottom', async () => {
const page = await newE2EPage({
url: '/src/components/infinite-scroll/test/scroll-target?ionic:_testing=true'
});
const initialItems = await page.findAll('ion-item');
expect(initialItems.length).toBe(30);
await scrollPage(page);
const items = await page.findAll('ion-item');
expect(items.length).toBe(60);
});
});

80
core/src/components/infinite-scroll/test/scroll-target/index.html Normal file
View File

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Infinite Scroll - Custom Scroll Target</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
#scroll-target {
height: 100%;
overflow-y: auto;
}
</style>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Infinite Scroll - Custom Scroll Target</ion-title>
</ion-toolbar>
</ion-header>
<ion-content scroll-y="false">
<div id="scroll-target" class="ion-padding ion-content-scroll-host">
<ion-list></ion-list>
<ion-infinite-scroll threshold="100px">
<ion-infinite-scroll-content loading-spinner="crescent" loading-text="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
</ion-content>
</ion-app>
<script>
let count = 0;
const list = document.querySelector('ion-list');
const infiniteScroll = document.querySelector('ion-infinite-scroll');
infiniteScroll.addEventListener('ionInfinite', async function () {
await wait(500);
infiniteScroll.complete();
appendItems();
// Custom event consumed in the e2e tests
document.dispatchEvent(new CustomEvent('ionInfiniteComplete'));
});
function appendItems() {
for (var i = 0; i < 30; i++) {
const el = document.createElement('ion-item');
el.textContent = `${++count}`;
list.appendChild(el);
}
}
function wait(time) {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, time);
});
}
appendItems();
</script>
</body>
</html>