Relevante Schritte für die Entwicklung von Vue+Swiper-Komponenten

Dieses Mal werde ich Ihnen die Schritte im Zusammenhang mit der Entwicklung von Vue+Swiper-Komponenten vorstellen. Was sind die Vorsichtsmaßnahmen für die Komponentenentwicklung von Vue+Swiper? Fall. Schauen wir uns das einmal an.

Swiper-Komponenten

<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 'swiper'
 export default {
  name: 'swiper',
  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: ['swiper'], //swiper的就是test这个数据传递来的
  methods: {
   _initSwiper() {
    this.mySwiper = new Swiper('.swiper-container', {
     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>

Von home.vue aufgerufene Komponentenmethode

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

Problem: Wenn Sie einfach 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 anfängliche Swiper-Knoten nicht erfolgreich erstellt wurde. und die Werteseite wird nicht gescrollt. Der Wert von Swiper kann Schicht für Schicht als leer gedruckt werden und der Wert kann übergeben werden, wenn etwas geändert wird. Daher müssen wir hier aktualisieren, indem wir beurteilen, ob der Knoten erfolgreich ist. Siwpers Methode

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Lassen Sie .vue in der neuen Sublime Text-Vorlage hervorheben

Node.js Umgebungsvariablenprozess Detaillierte Erläuterung der .env-Nutzung

Das obige ist der detaillierte Inhalt vonRelevante Schritte für die Entwicklung von Vue+Swiper-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!