基于PullToRefresh实现横向下拉刷新与加载更多

 PullToRefreshHorizontal({ 
        // 必传项，列表组件所绑定的数据 
        data: $data, 
        // 必传项，需绑定传入主体布局内的列表或宫格组件 
        scroller: this.scroller, 
        // 必传项，自定义主体布局，内部有列表或宫格组件 
        customList: () => { 
          // 一个用@Builder修饰过的UI方法 
          this.getListView(); 
        }, 
        // 可选项，下拉刷新回调 
        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); 
          }); 
        }, 
        customLoad: null, 
        customRefresh: null, 
      }) 
        .direction(Direction.Rtl) 
        // .direction(Direction.Ltr)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

 @Builder 
  private getListView() { 
    List({ space: 20, scroller: this.scroller }) { 
      ForEach(this.data, (item: string) => { 
        ListItem() { 
          Text(item) 
            .width(160) 
            .height(150) 
            .fontSize(20) 
            .textAlign(TextAlign.Center) 
            .backgroundColor('#95efd2') 
        } 
      }) 
    } 
    .listDirection(Axis.Horizontal) 
    .backgroundColor('#eeeeee') 
    .divider({ strokeWidth: 1, color: 0x222222 }) 
    .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果 
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

  private getTranslateXOfRefresh(newTranslateX: number): number { 
    if (this.refreshConfigurator !== undefined) { 
      let maxTranslateX = this.refreshConfigurator.getMaxTranslate(); 
      let sensitivity = this.refreshConfigurator.getSensitivity(); 
      if (maxTranslateX !== undefined && sensitivity !== undefined && this.trXTop !== undefined) { 
        // 阻尼值计算 
        if (this.trXTop / maxTranslateX < 0.2) { 
          newTranslateX = newTranslateX * 1 * sensitivity; 
        } else if (this.trXTop / maxTranslateX < 0.4) { 
          newTranslateX = newTranslateX * 0.8 * sensitivity; 
        } else if (this.trXTop / maxTranslateX < 0.6) { 
          newTranslateX = newTranslateX * 0.6 * sensitivity; 
        } else if (this.trXTop / maxTranslateX < 0.8) { 
          newTranslateX = newTranslateX * 0.4 * sensitivity; 
        } else { 
          newTranslateX = newTranslateX * 0.2 * sensitivity; 
        } 
        // 下拉值计算 
        if (this.trXTop + newTranslateX > maxTranslateX) { 
          return maxTranslateX; 
        } else if (this.trXTop + newTranslateX < 0) { 
          return 0; 
        } else { 
          return this.trXTop + newTranslateX; 
        } 
      } 
    } 
    return 0; 
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.