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

chore(): update readme

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-10-08 15:44:51 -05:00
parent b4a73ad760
commit 4036db5480
42 changed files with 1966 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
core/src/components/infinite-scroll/readme.md
View File

@ -33,9 +33,22 @@ Separating the `ion-infinite-scroll` and `ion-infinite-scroll-content` component
## Methods
| Method | Description |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `complete` | Call `complete()` within the `infinite` output event handler when your async operation has completed. For example, the `loading` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request to add more items to a data list. Once the data has been received and UI updated, you then call this method to signify that the loading has completed. This method will change the infinite scroll's state from `loading` to `enabled`. |
### `complete() => void`
Call `complete()` within the `ionInfinite` output event handler when
your async operation has completed. For example, the `loading`
state is while the app is performing an asynchronous operation,
such as receiving more data from an AJAX request to add more items
to a data list. Once the data has been received and UI updated, you
then call this method to signify that the loading has completed.
This method will change the infinite scroll's state from `loading`
to `enabled`.
#### Returns
Type: `void`
----------------------------------------------

10
core/src/components/infinite-scroll/test/top/e2e.ts Normal file
View File

@ -0,0 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';
it('infinite-scroll: basic', async () => {
const page = await newE2EPage({
url: '/src/components/infinite-scroll/test/basic?ionic:_testing=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

77
core/src/components/infinite-scroll/test/top/index.html Normal file
View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Infinite Scroll - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Infinite Scroll - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content" padding>
<ion-infinite-scroll threshold="100px" id="infinite-scroll" position="top">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
<ion-button onclick="toggleInfiniteScroll()" expand="block">
Toggle InfiniteScroll
</ion-button>
<ion-list id="list"></ion-list>
</ion-content>
</ion-app>
<script>
const list = document.getElementById('list');
const infiniteScroll = document.getElementById('infinite-scroll');
function toggleInfiniteScroll() {
infiniteScroll.disabled = !infiniteScroll.disabled;
}
infiniteScroll.addEventListener('ionInfinite', async function () {
console.log('Loading data...');
await wait(500);
infiniteScroll.complete();
appendItems();
console.log('Done');
});
function appendItems() {
for (var i = 0; i < 30; i++) {
const el = document.createElement('ion-item');
el.textContent = `${1 + i}`;
list.prepend(el);
}
}
function wait(time) {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, time);
});
}
appendItems();
</script>
</body>
</html>