[swiper] swiper内容切换自己无感知

问题场景描述

• 场景: 点击 label, 切换展示的轮播图内容。

这个功能我实现的思路是, 获取到数据后, 初始化一个 swiper, 当点击 label 时, 切换 swiper-slide里的数据即可, 但在实际操作中遇到了问题。

• 问题一: 修改 swiper 中每个swiper-slide里的数据后, swiper 并为感知到数据的变化, 没有重新重最开始的 swiper 进行切换, 而是继续按照之前顺序的进行切换。

解决方案

问题一: 该问题处理了好久, 网上找的他人的解决方法都不好使, 有的说可以通过初始化时的配置项, 自己测试后没有作用。最后是在官方文档中找到调用 update 方法解决这个问题的。

该方法中文档描述如下, 更新 swiper, 就像重新初始化一样。

方法链接

示例 demo

<template>
  <div id="swiper">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in activeData" :key="item">
          {{ item }}
        </div>
      </div>
      <div class="prev"></div>
      <div class="next"></div>
    </div>

    <div class="labels">
      <div
        class="label"
        v-for="item in labels"
        :key="item"
        @click="getActiveData(allData[item])"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
// import Swiper bundle with all modules installed
import Swiper from "swiper/bundle";
// import styles bundle
import "swiper/css/bundle";
export default {
  name: "SwiperLearn",
  data() {
    return {
      labels: ["春", "夏", "秋", "冬"],
      allData: {
        春: [1, 2, 3, 4],
        夏: [0, 1, 2, 3, 4, 5, 6],
        秋: [1, 2],
        冬: [1],
      },
      activeData: [],
      swiper: null,
    };
  },
  destoryed() {
    if (this.swiper) {
      this.swiper.destory(true); // 销毁 swiper 对象
      this.swiper = null;
    }
  },
  methods: {
    initSwiper() {
      if (this.swiper) {
        // slide change, force update swiper
        this.$nextTick(() => this.swiper.update(true));
        return;
      }

      this.swiper = new Swiper(".swiper-container", {
        loop: false,
        slidesPerView: 3,
        centeredSlides: false,
        // grabCursor: true,
        autoplay: {
          delay: 1000,
        },
        navigation: {
          nextEl: ".next",
          prevEl: ".prev",
        },
      });
    },
    getActiveData(data) {
      this.activeData = data;
      // data change, refresh swiper
      this.initSwiper();
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  width: 600px;
  height: 200px;
  background: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.labels {
  display: flex;
  margin-top: 50px;
}
.labels .label {
  border: 1px solid #008c8c;
  height: 20px;
  line-height: 20px;
  width: 50px;
  text-align: center;
  margin: 0 10px;
  cursor: pointer;
}

#swiper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swiper-container {
  position: relative;
  width: 185px;
  overflow: hidden;
}

.swiper-slide {
  width: 50px !important;
  height: 50px;
  background-color: #f5f5f5;
  border: 1px solid #008c8c;
  margin-right: 10px;
  text-align: center;
  line-height: 50px;
}

.prev,
.next {
  width: 0;
  height: 0;
  border: 10px solid red;
  z-index: 10;
  top: 20px;
}

.prev {
  position: absolute;
  left: -10px;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.next {
  position: absolute;
  right: 0px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
</style>

这篇好文章是转载于：编程之路