主要如下两行代码:
.pullDownRatio(this.ratio) //设置跟手系数,为0时就拉不动了
.onOffsetChange((offset: number)=>{
this.ratio = 1 - Math.pow((offset / this.maxRefreshingHeight), 3) // 越接近最大距离,下拉跟手系数越小
})demo如下:
import { ComponentContent } from '@ohos.arkui.node';@Builder
function customRefreshingContent() {Stack() {Row() {LoadingProgress().height(32)}.alignItems(VerticalAlign.Center)}.align(Alignment.Center).clip(true).constraintSize({minHeight:32}) // 设置最小高度约束保证自定义组件高度随刷新区域高度变化时自定义组件高度不会低于minHeight.width("100%")
}@Entry
@Component
struct RefreshExample {@State isRefreshing: boolean = false@State arr: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10']@State maxRefreshingHeight: number = 100.0@State ratio: number = 1private contentNode?: ComponentContent<Object> = undefinedaboutToAppear():void {let uiContext = this.getUIContext();this.contentNode = new ComponentContent(uiContext, wrapBuilder(customRefreshingContent))}build() {Column() {Refresh({ refreshing: $$this.isRefreshing, refreshingContent:this.contentNode}) {List() {ForEach(this.arr, (item: string) => {ListItem() {Text('' + item).width('70%').height(80).fontSize(16).margin(10).textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)}}, (item: string) => item)}.onScrollIndex((first: number) => {console.info(first.toString())}).width('100%').height('100%').alignListItem(ListItemAlign.Center).scrollBar(BarState.Off)}.backgroundColor(0x89CFF0).pullDownRatio(this.ratio).pullToRefresh(true).refreshOffset(64).onOffsetChange((offset: number)=>{this.ratio = 1 - Math.pow((offset / this.maxRefreshingHeight), 3) // 越接近最大距离,下拉跟手系数越小}).onStateChange((refreshStatus: RefreshStatus) => {console.info('Refresh onStatueChange state is ' + refreshStatus)}).onRefreshing(() => {setTimeout(() => {this.isRefreshing = false}, 2000)console.log('onRefreshing test')})}}
}