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) // 必须设置列表为滑动到边缘无效果
}
}
pullToRefresh介绍
最新推荐文章于 2024-09-02 19:15:57 发布