0

我正在使用 HTMX，并创建了一个加载指示器。指标被触发，一切都按预期工作，除了一件事。

指示器显示在我的内容上方，而不是隐藏/替换它。这看起来真的很糟糕，我正在努力解决这个问题 - 没有任何运气。

这是我的 HTML 代码：

<a href="#financial-data" data-toggle="tab"
   hx-indicator=".loader"
   hx-get="/my/url"
   hx-trigger="click, budget-saved from:body"
   hx-target="#financial-data"
   hx-swap="innerHTML">Click me</a>
<div class="tab-pane" id="financial-data">
    <div class="loader htmx-indicator"></div>
</div>

我试图抓住这个事件，但这 a) 不起作用并且 b) 感觉超级 hacky：

document.body.addEventListener('htmx:beforeSend', (e) => {
    if('hx-indicator' in e.target.attributes) {
        $(e.detail.target).html('<div class="loader htmx-indicator"></div>');                
    }
});

有什么想法我做错了吗？我不可能是第一个为此挣扎的人，对吧？

编辑：

API 将返回如下内容：

<div class="loader htmx-indicator"></div>
<table><tr><td>My data</td></tr></table>

这是我的加载器CSS：

.loader {
    display: none;
}

.htmx-request .loader {
    display: block;
}

.htmx-request.loader {
    display: block;
}

谢谢！

4

1 回答 1

1

我们还可以使用 HTMX 的指示器功能来隐藏在第一次请求后出现在页面上的先前加载的内容。

在响应中，我们向要在新请求期间隐藏的主要内容添加一个新类：

<div class="loader htmx-indicator"></div>
<table class="loaded-content"><tr><td>My data</td></tr></table>

然后我们告诉 HTMX 我们有两个指标目标：real 一个 with.loader和 content with .loaded-contentclass：

<a href="#financial-data" data-toggle="tab"
   hx-indicator=".loader,.loaded-content"
   hx-get="/my/url"
   hx-trigger="click, budget-saved from:body"
   hx-target="#financial-data"
   hx-swap="innerHTML">Click me</a>
<div class="tab-pane" id="financial-data">
    <div class="loader htmx-indicator"></div>
</div>

CSS定义：

.loader {
    display: none;
}

.htmx-request .loader {
    display: block;
}

.htmx-request.loader {
    display: block;
}

/* Hide previously loaded content during HTMX request */
.htmx-request .loaded-content {
    display: none;
}

.htmx-request.loaded-content {
    display: none;
}

因此，当用户单击按钮时，HTMX 会将.htmx-request类添加到两个指标目标。CSS 规则使实际指示器可见，而先前加载的内容在请求期间不可见。

于 2022-02-14T16:06:31.443 回答