Vue2项目中egjs-flicking初始化后如何动态更新align配置？

可以直接通过egjs-flicking实例提供的update()方法动态修改align配置，完全不需要销毁并重新初始化组件，具体实现步骤如下：

1. 绑定组件Ref并初始化配置 #

在模板中给flicking组件绑定ref，同时通过data属性维护当前的align值：

<template>
  <flicking 
    ref="flicking" 
    :align="currentAlign"
    <!-- 其他配置项 -->
  >
    <!-- 轮播内容节点 -->
  </flicking>
</template>

<script>
import Flicking from "@egjs/vue-flicking";

export default {
  components: { Flicking },
  data() {
    return {
      currentAlign: window.innerWidth < 768 ? "center" : "left",
      resizeTimer: null // 用于防抖处理
    };
  }
};
</script>

2. 监听窗口尺寸变化并动态更新配置 #

在mounted钩子中添加窗口resize事件监听，通过实例方法修改align：

mounted() {
  window.addEventListener("resize", this.handleResize);
  // 初始化时触发一次确保配置正确
  this.handleResize();
},
beforeDestroy() {
  // 销毁前移除监听，避免内存泄漏
  window.removeEventListener("resize", this.handleResize);
  clearTimeout(this.resizeTimer);
},
methods: {
  handleResize() {
    // 防抖处理，避免频繁触发
    clearTimeout(this.resizeTimer);
    this.resizeTimer = setTimeout(() => {
      const newAlign = window.innerWidth < 768 ? "center" : "left";
      if (newAlign !== this.currentAlign) {
        this.currentAlign = newAlign;
        // 核心：调用update方法更新align配置
        this.$refs.flicking.flicking.update({ align: newAlign });
        // 调用refresh立即重新计算布局，确保配置生效
        this.$refs.flicking.flicking.refresh();
      }
    }, 200);
  }
}

关键说明 #

• update()方法：egjs-flicking实例原生支持该方法，可传入任意需要修改的配置项（不止align），组件会自动合并新配置并更新，无需销毁重建。
• refresh()方法：修改配置后调用该方法，会强制组件重新计算布局，保证新的align设置立即生效，避免视觉延迟。
• 版本兼容性：确保使用的egjs-flicking版本支持update()方法，若为旧版本建议升级到最新稳定版。

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