HTMX 显示在初始页面加载时调用

Question

有什么想法为什么这个无限滚动可以在移动设备上工作，但不能在桌面上工作吗？我唯一能想到的是桌面使用弹性行而不是弹性列。除此之外（以及边距和填充），我相信一切都几乎相同。

<div id="saved-builds-container" class="w-full lg:w-desktop-sidebar px-4 flex lg:flex-row flex-col items-center lg:items-start justify-center lg:justify-around relative lg:ml-[289px] pb-4 lg:pt-20">
    <div class="max-w-screen-md w-full bg-[#F5F5F5] p-[1rem] lg:p-[2rem] rounded-[14px] relative lg:mt-0 mt-20">
        <img src="{{.Data.User.Avatar}}" alt="avatar" class="w-[100px] h-[100px] rounded-full absolute left-1/2 -translate-x-1/2 top-0 -translate-y-1/2 object-cover">
        <h1 class="text-[18px] font-semibold text-[#111827] lg:mt-[30px] mt-[45px] w-full text-center">{{.Data.User.Name}}</h1>
        <div class="flex items-center justify-center">
            <div class="flex items-center justify-center mr-[5px]">
                <img src="/public/images/account-user-icon.svg" alt="user" class="w-[20px] h-[20px]">
                <p class="font-normal text-[14px] text-[#111827] ml-[5px]">{{.Data.User.Username}}</p>
            </div>
            <div class="flex items-center justify-center ml-[5px]">
                <img src="/public/images/account-location-icon.svg" alt="email" class="w-[20px]">
                <p class="font-normal text-[14px] text-[#111827] ml-[5px]">{{.Data.User.Location}}</p>
            </div>
        </div>
        <h3 class="mt-8 w-full text-center text-[18px] font-semibold text-[#111827]">Saved Builds</h3>
        <div class="mt-4 grid grid-cols-1 gap-4" id="saved-builds">
            {{ range .Data.Builds }}
                {{ template "build-preview" . }}
            {{ end }}
            {{ if eq (len .Data.Builds) 3 }}
                <div 
                    hx-get="/saved/more?page=2" 
                    hx-trigger="revealed" 
                    hx-swap="outerHTML"
                    class="htmx-trigger">
                    Loading more builds...
                </div>
            {{ else if eq (len .Data.Builds) 0 }}
                <p class="text-center text-[14px] text-[#687280]">No saved builds yet.</p>
            {{ end }}
        </div>
    </div>
    {{template "popular-users" .Data.PopularUsers}}
</div>

作为参考，我也在 Go 和 TailwindCSS 中使用 html/template。我认为不需要包含像“populate-users”这样缺失的元素，因为它似乎是一个更基本的样式问题。

Answer 1

事实证明，当您有确定元素高度的图像并且这些图像尚未显示时，触发器就会显示。结果，就会产生多米诺骨牌效应。很高兴知道。