pulltorefresh下拉触发刷新高度设置以及下拉背景的设置

在处理问题的过程中遇到一个场景涉及pulltorefresh下拉高度自定义刷新和下拉背景设置,文档中相关接口只给了设置纯色背景,以及setSensitivity接口灵敏度0.7。

HarmonyOS
2024-05-26 11:46:45
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
okmwq

使用的能力相关的核心三方库

PullToRefresh

核心代码解释

自定义下拉上拉的布局,可以实现图片背景setMaxTranslate设置可下拉上拉的最大距离。

核心代码如下:

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) // 必须设置列表为滑动到边缘无效果 
} 
}

注明适配的版本信息

IDE:DevEco Studio 4.0.3.600

SDK:HarmoneyOS 4.0.10.11

分享
微博
QQ
微信
回复
2024-05-27 15:35:39
相关问题
HarmonyOS 组件下拉刷新问题
300浏览 • 1回复 待解决
HarmonyOS 下拉刷新功能
95浏览 • 1回复 待解决
Canvas如何触发刷新重复绘制?
769浏览 • 1回复 待解决
HarmonyOS 首页下拉刷新异常
109浏览 • 1回复 待解决
上拉加载,下拉刷新组件
259浏览 • 1回复 待解决
HarmonyOS使用Refresh下拉刷新问题
559浏览 • 1回复 待解决
数组中元素变更如何触发刷新list?
175浏览 • 1回复 待解决
Refresh结合lottie实现下拉刷新动画
972浏览 • 1回复 待解决
如何使用Swiper组件实现下拉刷新
658浏览 • 1回复 待解决
HarmonyOS ArkWeb如何实现下拉刷新功能
307浏览 • 1回复 待解决
有谁知道web组件如何下拉刷新
1884浏览 • 1回复 待解决
下拉刷新和上拉加载API为9sdk
2632浏览 • 1回复 待解决