pullToRefresh介绍

import { PullToRefresh, PullToRefreshConfigurator } from '@ohos/pulltorefresh' 
const pointSpace = 30; 
const pointJitterAmplitude = 10; 
​ 
@Entry 
@Component 
struct Index { 
 @State  refreshText: string = ''; 
 private dataNumbers: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; 
 private dataStrings: string[] = ['我的评论', '与我相关', '个人中心1', '个人中心2', '个人中心3', '我的发布', '设置', '退出登录']; 
 @State  data: string[] = this.dataStrings; 
 private scroller: Scroller = new Scroller(); 
 private refreshConfigurator: PullToRefreshConfigurator = new PullToRefreshConfigurator(); 
 private canvasSetting: RenderingContextSettings = new RenderingContextSettings(true); 
 private canvasRefresh: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.canvasSetting); 
 private value1: number[] = []; 
 private value2: number[] = []; 
​ 
 aboutToAppear() { 
   // 设置属性 
   this.refreshConfigurator 
    .setRefreshAnimDuration(600) // 下拉动画执行一次的时间 
    .setHasRefresh(true) // 是否具有下拉刷新功能 
    .setHasLoadMore(true) // 是否具有上拉加载功能 
    .setMaxTranslate(150) // 可下拉上拉的最大距离 
    .setSensitivity(1) // 下拉上拉灵敏度 
    .setListIsPlacement(false) // 滑动结束后列表是否归位 
    .setAnimDuration(300) // 滑动结束后，回弹动画执行时间 
    .setRefreshHeight(80) // 下拉动画高度 
    .setRefreshColor('#ffe0acac') // 下拉动画颜色 
    .setRefreshBackgroundColor('#d0efc2e2') // 下拉动画区域背景色 
    .setRefreshTextColor('red') // 下拉加载完毕后提示文本的字体颜色 
    .setRefreshTextSize(25) // 下拉加载完毕后提示文本的字体大小 
    .setRefreshAnimDuration(1000) // 下拉动画执行一次的时间 
    .setLoadImgHeight(50) // 上拉图片高度 
    .setLoadBackgroundColor('#ffbbfaf5') // 上拉动画区域背景色 
    .setLoadTextColor('blue') // 上拉文本的字体颜色 
    .setLoadTextSize(25) // 上拉文本的字体大小 
    .setLoadTextPullUp1('请继续上拉...') // 上拉1阶段文本 
    .setLoadTextPullUp2('释放即可刷新') // 上拉2阶段文本 
    .setLoadTextLoading('加载中...') // 上拉加载更多中时的文本 
} 
​ 
 build() { 
   Column() { 
     PullToRefresh({ 
       // 必传项，列表组件所绑定的数据 
       data: $data, 
       // 必传项，需绑定传入主体布局内的列表或宫格组件 
       scroller: this.scroller, 
       // 必传项，自定义主体布局，内部有列表或宫格组件 
       customList: () => { 
         // 一个用@Builder修饰过的UI方法 
         this.getListView(); 
      }, 
       // 可选项，组件属性配置，具有默认值 
       refreshConfigurator: this.refreshConfigurator, 
       // 可选项，下拉刷新回调 
       onRefresh: () => { 
         return new Promise<string>((resolve, reject) => { 
           // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据 
           setTimeout(() => { 
             resolve('刷新成功'); 
             this.data = this.dataNumbers; 
          }, 2000); 
        }); 
      }, 
       // 可选项，上拉加载更多回调 
       onLoadMore: () => { 
         return new Promise<string>((resolve, reject) => { 
           // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据 
           setTimeout(() => { 
             resolve(''); 
             this.data.push("增加的条目" + this.data.length); 
          }, 2000); 
        }); 
      }, 
       // 可选项，自定义下拉刷新动画布局 
       customRefresh: () => { 
         this.customRefreshView(); 
      }, 
       // 可选项，下拉中回调 
       onAnimPullDown: (value, width, height) => { 
         if(value !== undefined && width !== undefined && height !== undefined) { 
           this.canvasRefresh.clearRect(0, 0, width, height); 
           if (value <= 0.33) { 
             this.drawPoint(width / 2, height / 2); 
          } else if (value <= 0.75) { 
             this.drawPoint(width / 2 - (pointSpace / 2 * (value - 0.33) / (0.75 - 0.33)), height / 2); 
             this.drawPoint(width / 2 + (pointSpace / 2 * (value - 0.33) / (0.75 - 0.33)), height / 2); 
          } else { 
             this.drawPoint(width / 2, height / 2); 
             this.drawPoint(width / 2 - pointSpace / 2 - (pointSpace / 2 * (value - 0.75) / (1 - 0.75)), height / 2); 
             this.drawPoint(width / 2 + pointSpace / 2 + (pointSpace / 2 * (value - 0.75) / (1 - 0.75)), height / 2); 
          } 
        } 
      }, 
       // 可选项，刷新中回调 
       onAnimRefreshing: (value, width, height) => { 
         if(value !== undefined && width !== undefined && height !== undefined){ 
           this.canvasRefresh.clearRect(0, 0, width, height); 
           // 将value值由0到1循环变化变为-1到1反复变化 
           value = Math.abs(value * 2 - 1) * 2 - 1; 
           // 绘制第1个点 
           this.drawPoint(width / 2 - pointSpace, height / 2 + pointJitterAmplitude * value); 
           // 绘制第2个点 
           if (this.value1.length == 7) { 
             this.drawPoint(width / 2, height / 2 + pointJitterAmplitude * this.value1[0]); 
             this.value1 = this.value1.splice(1, this.value1.length); 
          } else { 
             this.drawPoint(width / 2, height / 2 + pointJitterAmplitude); 
          } 
           this.value1.push(value); 
           // 绘制第3个点 
           if (this.value2.length == 14) { 
             this.drawPoint(width / 2 + pointSpace, height / 2 + pointJitterAmplitude * this.value2[0]); 
             this.value2 = this.value2.splice(1, this.value2.length); 
          } else { 
             this.drawPoint(width / 2 + pointSpace, height / 2 + pointJitterAmplitude); 
          } 
           this.value2.push(value); 
        } 
      }, 
       customLoad: null, 
    }) 
  } 
} 
​ 
 private drawPoint(x: number, y: number): void{ 
   this.canvasRefresh.beginPath(); 
   this.canvasRefresh.arc(x, y, 3, 0, Math.PI * 2); 
   this.canvasRefresh.fill(); 
} 
​ 
 @Builder 
 private customRefreshView() { 
   Canvas(this.canvasRefresh) 
    .width('100%') 
    .height('100%') 
    .backgroundImage($r('app.media.bmpSample')) 
    .onReady(() => { 
       this.canvasRefresh.fillStyle = 'red'; 
    }) 
} 
​ 
 @Builder 
 private getListView() { 
   List({ space: 20, scroller: this.scroller }) { 
     ForEach(this.data, (item: string) => { 
       ListItem() { 
         Text(item) 
          .width('100%') 
          .height(150) 
          .fontSize(20) 
          .textAlign(TextAlign.Center) 
          .backgroundColor('#95efd2') 
      } 
    }) 
  } 
  .backgroundColor('#eeeeee') 
  .divider({ strokeWidth: 1, color: 0x222222 }) 
  .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果 
} 
}