カスタムページタブの位置付け

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

このケースは三者開発者「馮鵬」から来た。

1. 使用シーン

適切なタブにはデフォルトの選択機能がありますが、異なる場面では、このデフォルトの選択の動的なものが、設定通りに変化しないことを望んでいます。この例では、この機能を実現する方法を学ぶことができます。

2. 機能を実現する

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

2.2. タブの位置付け機能の設定

2.2.1. 部下コードをページjsにコピーする

/**
* 选项卡定位
* @param tabFieldId 需要定位的选项卡组件唯一标识
*/
export function toSpecifyTab(tabFieldId = '') {
  if (tabFieldId) {
    this.$(tabFieldId).set('traceable', true);
    const activeKey = this.state.urlParams[`__tab_index_${tabFieldId}`];
    if (activeKey) {
      this.$(tabFieldId).onTabChange(activeKey); // 可触发选项卡切换的 onTabChange 事件
    }
  }
}

2.2.2. Didmountで呼び出されます

タブコンポーネントの一意のidを変更します。タブの配置後にタブ切り替えをトリガーするontabchangeイベントです。

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

3. 効果を実現する

タブを切り替えるたびに、urlは現在選択されているタブパラメータを持ち、現在のurlを共有し、アクセスすると自動的に現在選択されているタブに切り替わります。

4.オンラインで試してみます

示例中心 | 开发者赋能平台

AI智能体时代，全新宜搭。业务创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_XD7XMIA1B80FYYX0WL4R&from=yuque_subject