カスタムページのドロップダウンがもっとロードされました

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

1. 使用シーン

カスタムページでデータを循環的に表示する場合、通常、ページングを使用してより多くのデータを表示することができます。この例では、要素を傍受することで、より多くのデータを表示することを検討します。

2. 機能を実現する

2.1. カスタムページの作成

アウトラインツリーは次のとおりです

循環コンテナ (データ要求の結果を循環表示するため):

Loadingコンテナ (データロードプロセスを促すため):

データロード済みコンテナ (データがすべてロードされたことを示すため):

ドロップダウン・ロード・リスニング・コンテナ (dom idとして一意のidを使用し、高さpxを設定する必要があります):

2.2. データソースの設定

参考ドキュメント:条件に基づいてフォームインスタンスの詳細リストを検索します

インタフェース構成図:

`/${window.pageConfig.appType || window.g_config.appKey}/v1/form/searchFormDatas.json`

2.3. ページ変数の設定

Pagesize: 1ページあたりの表示数、デフォルト値10
Current page: 現在のページ番号、デフォルト値1
Resultdata: リクエスト結果、デフォルト値 []
Isalldata: データがすべてロードされているかどうか、デフォルト値はfalseです
Loading: データロードステータス、デフォルト値false

2.4. ページ表示効果の設定

循環コンテナは循環データをバインドします

タイトルバインディング変数:

バインディング変数の概要:

データロードコンテナのバインド変数:

データはすべてコンテナバインディング変数をロードしました:

2.5. ページ機能の設定

次のコードをページjsにコピーし、didmountでscrolldownobserver関数を呼び出し、状況に応じて関数のパラメータを変更し、関数のパラメータの中の唯一のidは傍受されたコンテナの唯一のidである。

// 监听元素的可视性
// 详见：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
export function scrollDownObserver(rootNode) {
  const intersectionObserver = new IntersectionObserver(
    _.debounce((entries) => {
      const intersectionRatio = entries[0].intersectionRatio;
      const { loading, isAllData } = this.state;
      if (intersectionRatio > 0 && !loading && !isAllData) {
        this.setState({
          loading: true, // 开启加载状态
        });
        this.getData(); // 获取数据
      };
    }, 300),
  );
  intersectionObserver.observe(
    rootNode, {
      root: rootNode,
    },
  );
}

// 获取数据
export function getData() {
  const { currentPage, pageSize, resultData } = this.state;
  this.dataSourceMap.getData.load({
    formUuid: 'FORM-7485B64495AF4BB5A2F763A0D6ABA2CF3GSD',
    currentPage,
    pageSize,
  }).then((res) => {
    const { data = [], totalCount } = res;
    const result = data.map((item) => {
      const { formData = {} } = item;
      return {
        title: formData.textField_ldxu659y,
        desc: formData.textareaField_ldxuoi6d,
      };
    });
    resultData.push(...result);
    if (resultData.length === totalCount) {
      // 数据已全部加载完毕
      this.setState({
        resultData,
        isAllData: true,
        loading: false,
      });
    } else {
      this.setState({
        currentPage: currentPage + 1,
        resultData,
        loading: false,
      });
    }
  }).catch((error) => {
    this.utils.toast({
      title: error.message,
      type: 'error',
    });
  });
}

Didmountで呼び出されます:

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
  this.scrollDownObserver(document.querySelector('#div_le5161ks'));
}