# 在华为云Astro轻应用标准页面中，如何实现移动端上拉异步加载数据功能？
在华为云Astro轻应用标准页面中，通过添加一个视图列表组件，即可实现在移动端数据的上拉异步加载功能，具体操作如下：
1. 在华为云Astro轻应用服务控制台的主页中，单击"进入首页"，进入应用开发页面。
2. 在"主页 \> 全部应用"中，单击应用后的"编辑"，进入应用设计器。
3. 新建一个标准页面，并进行页面设计。 
   1. 在应用设计器的界面中，单击页面后的"+"，输入页面标签和名称，新建一个标准页面。
   
   2. 在"基本组件 \> 布局"中，拖拽一个列表视图组件到画布中。
      图1添加列表视图组件   
      ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000002117739081.png "点击放大") 
   
   3. 再从"表单"中，拖拽一个输入框到列表视图中。
      图2添加输入框   
      ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000002082062328.png "点击放大") 
   
   4. 选中列表视图组件，在"属性 \> 移动端配置"中，将"默认数据条数"设置为"5"，并开启"显示加载文字"和"异步加载"。
      图3移动端设置   
      ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000002082222700.png "点击放大") 
   
   
   
   
4. 为组件绑定数据。 
   1. 选中列表视图组件，在"属性 \> 数据绑定"中，单击"值(value) 绑定"后的![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000002082231992.png)。
      图4单击图标   
      ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000002082231440.png "点击放大") 
   
   2. 单击"新建模型"，输入模型名称（如datasource），"来源"选择"自定义"，单击"下一步"。
      图5新增模型   
      ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000002082245740.png "点击放大") 
   
   3. 单击"新增节点"，新增一个value节点，单击"下一步"。
      图6新增一个节点   
      ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000002082093076.png "点击放大") 
   
   4. 单击"确定"，进入模型选择页面，选择刚创建的模型。
      图7选择模型   
      ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000002117689093.png "点击放大") 
   
   5. 选中输入框组件，按照上述操作，为组件绑定value字段。
      图8为输入框组件绑定模型   
      ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000002083376238.png "点击放大") 
   
   
   
   
5. 添加事件。 
   1. 选中页面，在"事件"中，单击加载后的"+"。
      图9添加事件   
      ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000002083377910.png "点击放大") 
   
   2. 在自定义动作中，输入如下示例代码，单击"创建"。
      ```
      const list = [];
      for (let i = 0; i < 5; i++) {
          list.push({
              value: i + 1
          })
      }
      $model.ref('datasource').setData(list);
      ```
      其中，*"datasource"* 请配置为[4.b]中创建的模型。
      
   
   3. 选中列表视图组件，按照上述操作，为列表视图组件添加事件。
      图10为列表视图添加事件   
      ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000002119060665.png "点击放大")
      图11输入自定义JS代码   
      ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000002083570854.png "点击放大")
      ```
      const list = [];
      for (let i = 0; i < 5; i++) {
          list.push({
              value: i + 1
          })
      }
      context.$params[0](list);
      ```
      
   
   
   
   
6. 验证效果是否符合预期。 
   1. 单击页面上方的![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000002119152737.png)，保存标准页面。
   
   2. 保存成功后，单击![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000002083432992.png)，在移动端预览效果。
      图12原始显示效果   
      ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000002119138901.png) 
   
   3. 按住左键鼠标向上拖动，数据可正常加载。
      图13异步加载数据   
      ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000002119142801.png)