swiper4.0 问题，动态加载的数据显示不正常

Question

动态加载的数据，静态数据是20个slide 能对整齐。动态加载的数据只有15个却不能对齐

 var mySwiper = new this.$Swiper(".swiper-container2", {
        slidesPerView: 5, //一行显示5个
        slidesPerColumn: 2, //显示2行
        slidesPerGroup: 5, //每次滑动滚动的数量
        scrollbar: {
          el: "#sw2",
          dragSize: 53
        },
        draggable: false,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: false,
      });
      mySwiper.scrollbar.$el.css("height", "15px");
      mySwiper.scrollbar.$dragEl.css("background", "#F2414C");
      mySwiper.scrollbar.$el.css("width", "157px");
      mySwiper.scrollbar.updateSize();

            //结构
            <div class="swiper-container2">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="item in goodslist"
          :key="item.id"
          @click="toNew(item.id)"
        >
          <div class="box">
            <img :src="item.src" alt="这是图" />
          </div>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <br />
      <div class="swiper-scrollbar" id="sw2"></div>
    </div>

Answer 1

您好题主！
🍭本答案参考GPT-4o，由爪磕整理并总结，希望对您有所帮助！

---

从你的描述和截图来看，动态加载的数据没有正确对齐可能是由于 Swiper 在动态内容加载后没有正确更新其布局。你需要在数据加载完成后调用 Swiper 的 update() 方法来重新计算布局。

你可以在 Vue.js 的 nextTick 中调用 Swiper 的 update() 方法，以确保 Swiper 在 DOM 完全更新之后重新计算布局。

请参考以下代码示例：

var mySwiper = new this.$Swiper(".swiper-container2", {
  slidesPerView: 5, //一行显示5个
  slidesPerColumn: 2, //显示2行
  slidesPerGroup: 5, //每次滑动滚动的数量
  scrollbar: {
    el: "#sw2",
    dragSize: 53
  },
  draggable: false,
  observer: true, //修改swiper自己或子元素时，自动初始化swiper
  observeParents: false,
});

mySwiper.scrollbar.$el.css("height", "15px");
mySwiper.scrollbar.$dragEl.css("background", "#F2414C");
mySwiper.scrollbar.$el.css("width", "157px");
mySwiper.scrollbar.updateSize();

// 监听 goodslist 数据的变化
this.$watch('goodslist', function(newVal, oldVal) {
  this.$nextTick(() => {
    mySwiper.update(); // 数据更新后调用 Swiper 的 update 方法
  });
});

在 Vue.js 模板中：

<div class="swiper-container2">
  <div class="swiper-wrapper">
    <div
      class="swiper-slide"
      v-for="item in goodslist"
      :key="item.id"
      @click="toNew(item.id)"
    >
      <div class="box">
        <img :src="item.src" alt="这是图" />
      </div>
      <span>{{ item.name }}</span>
    </div>
  </div>
  <br />
  <div class="swiper-scrollbar" id="sw2"></div>
</div>

确保 goodslist 在加载新的数据时触发 Vue 的响应式更新。这样，在数据加载完成且 DOM 更新后，Swiper 的 update 方法会重新计算布局，确保动态加载的数据能正确对齐。

如果你在获取数据时使用了异步方法（例如 Ajax 请求），请在数据请求完成后调用 this.$nextTick 来更新 Swiper：

fetchData() {
  // 假设这是你的数据请求函数
  axios.get('/api/your-endpoint').then(response => {
    this.goodslist = response.data;
    this.$nextTick(() => {
      mySwiper.update(); // 数据更新后调用 Swiper 的 update 方法
    });
  });
}

这样可以确保 Swiper 在数据动态加载后正确更新布局。