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?
Updated on 2025-08-14 GMT+08:00
How Do I Implement the Asynchronous Pull-up Data Loading on Mobile Devices on a Standard Page?
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.
- On the application designer page, click + next to Page and enter a page label and name to create a standard page.
- Choose Basic > Layout and drag a list view widget to the canvas.
Figure 1 Adding a list view widget
- Drag an input widget from Form to the List View widget.
Figure 2 Adding an input widget
- 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.
- Select the list view widget, choose Properties > Data Binding, and click
next to Value Binding.
Figure 4 Clicking the icon - Click New, specify Model Name (for example, datasource), select Custom for Source, and click Next.
Figure 5 Adding a model
- Click Add Node to add a value node, and click Next.
Figure 6 Adding a node
- Click OK. On the model selection page that is displayed, select the created model.
Figure 7 Selecting the model
- 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
- Select the list view widget, choose Properties > Data Binding, and click
- Add an event.
- Select the page. On the Events tab page, click + next to on-load.
Figure 9 Adding an event
- 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.
- Select the list view widget and repeat the preceding operations to add events for it.
Figure 10 Adding eventsFigure 11 Entering the custom JavaScript code
const list = []; for (let i = 0; i < 5; i++) { list.push({ value: i + 1 }) } context.$params[0](list);
- Select the page. On the Events tab page, click + next to on-load.
- Check whether the effect meets the expectation.
- Click
in the upper part of the page to save the standard page.
- Click
to preview the effect on the mobile device.
Figure 12 Original display effect - Hold down the left mouse button and drag it up. The data can be loaded properly.
Figure 13 Asynchronous data loading
- Click
Parent topic: Application Frontend Development
Feedback
Was this page helpful?
Provide feedbackThank you very much for your feedback. We will continue working to improve the documentation.See the reply and handling status in My Cloud VOC.
The system is busy. Please try again later.
For any further questions, feel free to contact us through the chatbot.
Chatbot