Detaillierte Erläuterung der Vue-Swiper-Implementierung der Komponentenentwicklung

Ich weiß nicht, wie viel Sie über Swiper wissen. In diesem Artikel werden hauptsächlich relevante Informationen zur Komponentenentwicklung von vue+swiper vorgestellt.

Swiper-Komponente

<template>
  <p class="swiper-container">
    <p class="swiper-wrapper">
      <p class="swiper-slide" v-for="item in swiper"><img :src="item.room_src" alt=""></p>
      <!--<p class="swiper-slide" v-for="item in test"><img :src="item.room_src" alt=""></p>-->
    </p>
  </p>
</template>
<script>
 import Swiper from &#39;swiper&#39;
 export default {
  name: &#39;swiper&#39;,
  data() {
   return {
    mySwiper: null,
//    test: [
//     "https://rpic.douyucdn.cn/acrpic/171024/288016_0921.jpg",
//     "https://rpic.douyucdn.cn/acrpic/171024/748396_0924.jpg",
//     "https://rpic.douyucdn.cn/acrpic/171024/453751_0922.jpg",
//     "https://rpic.douyucdn.cn/acrpic/171024/79663_0920.jpg"
//    ]
   }
  },
  props: [&#39;swiper&#39;], //swiper的就是test这个数据传递来的
  methods: {
   _initSwiper() {
    this.mySwiper = new Swiper(&#39;.swiper-container&#39;, {
     autoplay: 5000,//可选选项，自动滑动
    })
   },
   _updateSwiper() {
    this.$nextTick(() => {
     this.mySwiper.update(true); //swiper update的方法
    })
   },
   swiperUpdate() {
    if (this.mySwiper) { //节点存在
     this._updateSwiper(); //更新
    } else {
     this._initSwiper(); //创建
    }
   },
  },
  watch: {
   //通过props传来的数据 和 组件一加载节点就创建成功 二者不是同步，实时监听的swiper(传递的值)的变化
   swiper() {
    this.swiperUpdate();
   }
  },
  mounted() {
   this.swiperUpdate(); //页面一加载拉去数据创建节点
  }
 }
</script>
<style lang="scss" scoped>
  .swiper-container {
    width: 100%;
    height: 4rem;
    margin-top: 0.9rem;
    .swiper-wrapper {
      width: 100%;
      height: 100%;
      .swiper-slide {
        background-size: cover;
        width: 100%;
        height: 4rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>

Die von home.vue aufgerufene Komponentenmethode

//html
  <swiper :swiper="roomList.slice(6,10)" ></swiper>
//js
 import swiper from &#39;components/swiper/swiper&#39;
 components: {
   swiper
  },

Problem: Wenn einfach Wenn Sie die _initSwiper-Methode aufrufen, werden Sie feststellen, dass die Seite nicht gescrollt werden kann, aber die Seite kann beiläufig geändert werden, und dann kann der gespeicherte Swiper gescrollt werden. Der Grund dafür ist, dass der ursprüngliche Swiper-Knoten nicht erfolgreich erstellt wurde und der Wert Die Seite wurde Schicht für Schicht durchdrungen, der Wert von Swiper kann als leer gedruckt werden, und wenn der Wert geändert wird, kann er übergeben werden. Daher müssen wir hier die Siwper-Methode aktualisieren, indem wir beurteilen, ob der Knoten erfolgreich ist

Verwandte Empfehlungen:

Tutorial zur Implementierung der Bildkarussell-Umschaltfunktion mit der WeChat Xiaocheng Swiper-Komponente

Implementierung des mobilen Effekts CellSwiper

WeChat Ein Beispiel dafür, wie ein Miniprogramm den Non-Swiper-Effekt eines normalen Tabs oben erzielen kann

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Vue-Swiper-Implementierung der Komponentenentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!