如何让UIkit Slideshow高度随内容自适应并解决滑动收缩问题

问题原因 #

你当前使用table布局实现自适应时出现切换收缩的问题，是因为UIkit默认给轮播项设置了绝对定位控制显隐，table布局的重排特性会触发布局抖动，导致切换过程出现先收缩再适配的异常表现。

方案1：适配现有fade动画场景（无JS修改） #

如果你当前仅使用fade类型的轮播切换动画，可直接通过调整CSS规则修复抖动问题，无需修改JS和HTML结构：

/* 覆盖UIkit默认轮播容器高度规则 */
.uk-slideshow-items {
    min-height: unset !important;
    height: auto !important;
    position: relative;
}
/* 非激活轮播项直接隐藏不占位，避免重排 */
.uk-slideshow-items li:not(.uk-active) {
    display: none !important;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
/* 激活轮播项保留在正常文档流，自动撑开容器高度 */
.uk-slideshow-items li.uk-active {
    display: block !important;
    position: relative;
    opacity: 1;
}

方案2：全动画场景通用方案（JS动态计算高度） #

如果需要支持滑动类轮播动画，可通过JS监听轮播切换事件动态计算容器高度，稳定性更高：

新增CSS规则 #

.uk-slideshow-items {
    min-height: unset !important;
}

新增JS逻辑 #

// 监听轮播项切换前事件，预计算下一个轮播项高度
UIkit.util.on(document, 'beforeitemshow', '.uk-slideshow', function (e) {
    const nextItem = e.detail[0];
    const slideshowContainer = e.currentTarget.querySelector('.uk-slideshow-items');
    const nextHeight = nextItem.scrollHeight;
    // 高度过渡时长可与轮播动画时长对齐，避免生硬跳变
    slideshowContainer.style.transition = 'height 0.3s ease';
    slideshowContainer.style.height = `${nextHeight}px`;
});

// 页面加载完成后初始化首个轮播项高度
window.addEventListener('load', () => {
    const activeItem = document.querySelector('.uk-slideshow-items li.uk-active');
    if (activeItem) {
        const slideshowContainer = activeItem.parentElement;
        slideshowContainer.style.height = `${activeItem.scrollHeight}px`;
    }
});

// 窗口尺寸变化时重新计算当前轮播项高度，适配响应式
window.addEventListener('resize', () => {
    const activeItem = document.querySelector('.uk-slideshow-items li.uk-active');
    if (activeItem) {
        const slideshowContainer = activeItem.parentElement;
        slideshowContainer.style.height = `${activeItem.scrollHeight}px`;
    }
});

注意事项 #

• 若轮播项内包含图片等异步加载资源，建议提前给资源设置宽高比占位，或监听资源加载完成事件后重新触发高度计算，避免高度计算偏差。
• 高度过渡的0.3s时长可根据你设置的轮播动画时长自行调整，保证切换流畅度。

内容的提问来源于stack exchange，提问作者RuLee