下拉刷新是绝大多数APP的标配效果。

最近找了不少的资料，想给开发的鸿蒙应用添加下拉刷新的功能，可绝大多数资料都是过期的，或者实现过程非常复杂。翻阅了官方的Refresh组件的介绍信息，里面只有一段很简单的代码，复现效果不好。

于是，我多次尝试，做了一个下面的演示案例，希望能让大家少走弯路：

整个过程实现过程如下：

一、导入Bmob SDK

创建鸿蒙项目，选择Stage模型，API9.0，然后在DevEco Studio 开发工具的命令行（Terminal）中执行下面的命令，安装Bmob Harmony SDK：

shell 复制代码

ohpm install @bmob/bmob

如果一切顺利，你会在当前项目下的oh_modules目录下看到@bmob/bmob的包已经成功下载，如下图所示：

二、获取密钥

三、初始化应用

在你创建的鸿蒙应用中，entry/src/main/ets 下面新建一个ArkTS File，名为BmobApp。代码如下：

js 复制代码

import { Bmob } from '@bmob/bmob';
import AbilityStage from '@ohos.app.ability.AbilityStage';
export default class BmobApp extends AbilityStage {
    onCreate() {
        super.onCreate();
        Bmob.initialize('你的Secret Key', '你的Secret Code')
    }
}

四、配置网络权限和设置应用入口

打开 entry/src/main/module.json5 文件，在module节点下面新增 srcEntry 和 requestPermissions 子节点，配置如下：

bash 复制代码

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet"
    ],
    "srcEntry": "./ets/BmobApp.ets",
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
    ...省略更多
  }
}

五、数据表设计

进入到Bmob后端云控制台，创建一个名为Contact的数据表，并添加数据，表设计如下：

字段名称	注释	类型
name	姓名	string
title	头衔	string
company	所在公司	string
img	头像	string

添加数据如下：

六、获取数据列表

获取数据的代码非常简单，这里不多解释，更多文档可以直接查看官方文档。

typescript 复制代码

// 获取的数据列表
@State lists:any = []

//是否正在下拉刷新
@State isRefreshing: boolean = false

//获取数据列表
getContact(){
  let query = Bmob.Query('Contact')
  query.orderby('createdAt').find().then((res)=>{
    res.forEach((r)=>{
      const ifexist = this.lists.findIndex(item=>item.objectId==r.objectId)
      if(ifexist==-1)
        this.lists.unshift(r)
    })

    this.isRefreshing = false
  })
}

Bmob.Query主要用于对一般表的操作，构造函数传入数据表名称即可。
orderby是排序方法，这里表示按创建日期进行排序。
find方法为查询所有数据的方法。
unshift方法是列表插入数据的方法，表示插入到最前面。

七、编写ArkUI布局文件

1、定义列表项布局

我们这里将会用到List组件，List组件的每一个ListItem的布局代码如下（db对象对应Bmob后端云获取的一条数据）：

scss 复制代码

@Builder
item(db) {
  Row({ space: 10 }) {
    Image(db.img)
      .width(50)
      .aspectRatio(1)
      .borderRadius(90)

    Column({ space: 5 }) {
      Text(db.name)
        .fontWeight(FontWeight.Bold)
        .fontSize(14)

      Text(db.title)
        .fontSize(12)

      Text(db.company)
        .fontSize(12)

    }
    .alignItems(HorizontalAlign.Start)
    .layoutWeight(1)

    Text('拨打电话')
      .fontSize(12)
      .width(80)
      .height(30)
      .borderRadius(20)
      .borderWidth(1)
      .borderColor(Color.Orange)
      .textAlign(TextAlign.Center)
  }
  .alignItems(VerticalAlign.Center)
  .justifyContent(FlexAlign.SpaceBetween)
  .margin({top:10})
}

2、编写页面布局

这里用到了Refresh组件，List组件作为Refresh的子组件，onRefreshing方法中实现数据的更新。

具体代码如下：