On this page

Show all

Help Center/ Huawei Cloud Astro Zero/ FAQs/ Application Frontend Development/ How Do I Implement the Asynchronous Pull-up Data Loading on Mobile Devices on a Standard Page?

How Do I Implement the Asynchronous Pull-up Data Loading on Mobile Devices on a Standard Page?

Updated on 2025-03-20 GMT+08:00

View PDF

On a standard page, add a list view widget to implement asynchronous pull-up data loading on mobile devices. The procedure is as follows:

On the Huawei Cloud Astro Zero console, click Access Homepage.
On the Homepage > All Apps page, click Edit next to an application to access the application designer.
Create a standard page and design it.
1. On the application designer page, click + next to Page and enter a page label and name to create a standard page.
2. Choose Basic > Layout and drag a list view widget to the canvas.
  Figure 1 Adding a list view widget
3. Drag an input widget from Form to the List View widget.
  Figure 2 Adding an input widget
4. Select the list view widget, choose Properties > Mobile Configuration, set the value of Default Data Count to 5, and enable Loading Text and Async Loading.
  Figure 3 Mobile configuration
Bind data to the widget.
1. Select the list view widget, choose Properties > Data Binding, and click next to Value Binding.
  Figure 4 Clicking the icon
2. Click New, specify Model Name (for example, datasource), select Custom for Source, and click Next.
  Figure 5 Adding a model
3. Click Add Node to add a value node, and click Next.
  Figure 6 Adding a node
4. Click OK. On the model selection page that is displayed, select the created model.
  Figure 7 Selecting the model
5. Select the input widget and perform the preceding operations to bind the value field to the widget.
  Figure 8 Binding a model to the input widget
Add an event.
1. Select the page. On the Events tab page, click + next to on-load.
  Figure 9 Adding an event
2. Under Custom Action, enter the following sample code and click Create.
```
const list = [];
for (let i = 0; i < 5; i++) {
    list.push({
        value: i + 1
    })
}
$model.ref('datasource').setData(list);
```
  Set datasource to the model created in 4.b.
3. Select the list view widget and repeat the preceding operations to add events for it.
  Figure 10 Adding events
  
  Figure 11 Entering the custom JavaScript code
```
const list = [];
for (let i = 0; i < 5; i++) {
    list.push({
        value: i + 1
    })
}
context.$params[0](list);
```
Check whether the effect meets the expectation.
1. Click in the upper part of the page to save the standard page.
2. Click to preview the effect on the mobile device.
  Figure 12 Original display effect
3. Hold down the left mouse button and drag it up. The data can be loaded properly.
  Figure 13 Asynchronous data loading