刷新（Refresh）
Refresh可以进行页面下拉操作并显示刷新动效的容器组件，拥有默认刷新动效，也可以自定义刷新动效。
基本使用
如下图所示，使用List列表显示1-10十个列表项，使其具备下拉刷新效果。
使用Refresh嵌套List就可以具备下拉属性效果。
ts
Refresh({
refreshing: $$this.isRefreshing, //是否处于刷新状态（true正在刷新，false未刷新）
promptText:"正在刷新..." //下拉时显示的文本
}) {
//...
}Refresh提供了以下属性和事件配置刷新距离、监听下拉刷新状态等。
【属性】
- .refreshOffset(100) 刷新的距离。
- .pullToRefresh(true) 到达刷新距离时是否触发刷新
- .pullDownRatio(0.7) 设置跟手系数[0,1]，越接近1跟手系数越大。
【事件】
- .onStateChange((state: RefreshStatus)=>void) 监听刷新状态
- 0 未下拉状态
- 1 下拉小于刷新距离
- 2 下拉超过或等于新距离
- 3 下拉超过并回弹到刷新距离
- 4 刷新结束
- .onRefreshing(callback: () => void) 正在刷新时触发的回调代码如下
ts
@Entry
@Component
struct Index {
@State list: Array<number> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
@State isRefreshing: boolean = false //正在刷新的开关
build() {
Column() {
Refresh({
refreshing: $$this.isRefreshing,
promptText:"正在刷新..."
}) {
List() {
ForEach(this.list, (item: number) => {
ListItem() {
Text(`${item}`).width("100%").textAlign(TextAlign.Center).backgroundColor(Color.White)
.height(100)
}
})
}.width("100%")
.divider({
strokeWidth: 1,
startMargin: 10,
endMargin: 10
}).padding({ top: 10, bottom: 10 })
}
.refreshOffset(100) //触发刷新的下拉距离
.pullToRefresh(true) //当下拉距离大于或者等于触发距离距离时，决定是否刷新。
.pullDownRatio(0.7) //设置滑动的跟手系数（0表示不跟手，滑不动；1表示完全跟手，手到哪里组件到哪里）
.onStateChange((state: RefreshStatus) => {
if (state == 0) { //未下拉时的状态
console.log("未下拉时的状态：" + state)
}
if (state == 1) { //下拉距离小于设定值时的状态
console.log("下拉距离小于设定值的状态：" + state)
}
if (state == 2) { //下拉距离超过设定值时的状态
console.log("下拉距离超过设定值的状态：" + state)
}
if (state == 3) { //下拉距离超过设定值，并回弹到设定值的状态，即正在刷新状态
console.log("超过设定刷新距离并回弹，正在刷新状态：" + state)
}
if (state == 4) { //刷新结束的状态
console.log("刷新结束：" + state)
}
})
.onRefreshing(() => { //当state状态为3时，进入此回调
//网络请求获取最新数据，赋值赋值给list,触发UI更新。
//定时任务，2秒钟之后结束刷新
setTimeout(() => {
this.list = [10, 20, 30, 40, 50, 10, 20, 30, 40, 50, 10, 20, 30, 40, 50, 10, 20, 30, 40, 50]
this.isRefreshing = false
}, 2000)
})
}.width("100%")
.height("100%")
.backgroundColor("#9ACEED")
}
}自定义刷新动效
如图所示，自定义下拉刷新区域的显示效果。
在创建Refresh时，通过builder参数可以配置自定义刷新区域显示效果。代码如下
ts{8-15,21}
@Entry
@Component
struct Index {
@State list: Array<number> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
@State isRefreshing: boolean = false //正在刷新的状态
//自定义刷新区域UI效果
@Builder
refreshLayout() {
Row() {
LoadingProgress().width(50).height(50)
Text('正在刷新...')
}.width("100%")
.justifyContent(FlexAlign.Center)
}
build() {
Column() {
Refresh({
refreshing: $$this.isRefreshing,
builder: this.refreshLayout()
}) {
List() {
ForEach(this.list, (item: number) => {
ListItem() {
Text(`${item}`).width("100%").textAlign(TextAlign.Center).backgroundColor(Color.White)
.height(100)
}
})
}.width("100%")
.divider({
strokeWidth: 1,
startMargin: 10,
endMargin: 10
})
}
.refreshOffset(100) //触发刷新的下拉距离
.pullToRefresh(true) //当下拉距离大于或者等于触发距离距离时，决定是否刷新。
.pullDownRatio(0.7) //设置滑动的跟手系数（0表示不跟手，滑不动；1表示完全跟手，手到哪里组件到哪里）
.onStateChange((state: RefreshStatus) => {
if (state == 0) { //未下拉时的状态
console.log("未下拉时的状态：" + state)
}
if (state == 1) { //下拉距离小于设定值时的状态
console.log("下拉距离小于设定值的状态：" + state)
}
if (state == 2) { //下拉距离超过设定值时的状态
console.log("下拉距离超过设定值的状态：" + state)
}
if (state == 3) { //下拉距离超过设定值，并回弹到设定值的状态，即正在刷新状态
console.log("超过设定刷新距离并回弹，正在刷新状态：" + state)
}
if (state == 4) { //刷新结束的状态
console.log("刷新结束：" + state)
}
})
.onRefreshing(() => { //当state状态为3时，进入此回调
//网络请求获取最新数据，赋值赋值给list,触发UI更新。
//定时任务，2秒钟之后结束刷新
setTimeout(() => {
this.list = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150]
this.isRefreshing = false
}, 2000)
})
}.width("100%")
.height("100%")
.backgroundColor("#9ACEED")
}
}到此，Refresh刷新组件的使用就介绍完了🎉🎉🎉。