Vue2项目使用@egjs/flicking插件时自适应高度不生效如何解决

问题说明 #

• 项目框架：Vue 2
• 依赖插件：@egjs/flicking
• 异常现象：各轮播面板内容高度不一致时，轮播容器无法自动适配当前视口范围内可见面板的最大高度，自适应功能未正常生效

失效原因 #

1. 配置缺失：@egjs/flicking 默认关闭高度自适应能力，且低版本默认仅计算当前激活面板高度，不会自动统计同视口内其他可见面板的高度值
2. 渲染时机错误：面板内包含图片、异步接口返回内容时，插件初始化阶段内容尚未完成渲染，拿到的高度是初始占位高度，计算结果不符合预期
3. 样式冲突：自定义CSS给轮播容器写死高度、给面板设置100%高度等规则，会干扰插件的高度计算逻辑

修复步骤 #

1. 补全插件配置 #

在Flicking组件上传入正确的配置参数，开启自适应能力：

<Flicking
  :options="flickingOptions"
  @ready="handleFlickingReady"
  @moveEnd="handlePanelChange"
>
  <!-- 轮播面板内容 -->
</Flicking>

data() {
  return {
    flickingOptions: {
      adaptive: true, // 开启基础高度自适应
      adaptiveOnResize: true, // 窗口/容器尺寸变化时自动重算高度
      // 其余原有配置，比如panelsPerView、circular等保持不变
    },
    flickingInstance: null
  }
},

2. 处理异步内容的高度重算 #

如果面板包含图片、异步渲染内容，等内容加载完成后手动调用实例方法触发高度重算：

methods: {
  handleFlickingReady(instance) {
    this.flickingInstance = instance
    const allImages = this.$el.querySelectorAll('.flicking-panel img')
    if (!allImages.length) {
      instance.resize()
      return
    }
    let loadCount = 0
    const triggerResize = () => {
      loadCount++
      if (loadCount === allImages.length) instance.resize()
    }
    allImages.forEach(img => {
      img.addEventListener('load', triggerResize)
      img.addEventListener('error', triggerResize)
    })
  },
  handlePanelChange() {
    this.$nextTick(() => {
      this.flickingInstance?.resize()
    })
  }
}

3. 排查样式冲突 #

确认以下样式规则没有被错误添加：

• 不要给.flicking-viewport容器设置固定height值
• 不要给.flicking-panel面板设置height: 100%属性，避免面板高度被父容器反向撑高
• 插件初始化完成前，不要给面板容器添加display: none类的隐藏规则

低版本兼容方案 #

如果使用的是3.x及更低版本的@egjs/flicking，插件没有内置视口内多面板最大高度计算能力，可以在面板切换完成后手动计算高度赋值给容器：

handlePanelChange() {
  this.$nextTick(() => {
    const visiblePanels = this.flickingInstance.visiblePanels
    const maxHeight = Math.max(...visiblePanels.map(panel => panel.element.offsetHeight))
    this.flickingInstance.viewport.element.style.height = `${maxHeight}px`
  })
}

内容的提问来源于stack exchange，提问作者Данил Пономаренко