Explication détaillée de la mise en œuvre de Vue Swiper pour le développement de composants

Je ne sais pas ce que vous savez sur swiper. Cet article présente principalement les informations pertinentes sur vue+swiper pour réaliser le développement de composants. Les amis qui en ont besoin peuvent s'y référer.

Composant de Swiper

<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>

La méthode du composant appelée par home.vue

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

Problème : Si simplement Si vous appelez la méthode _initSwiper, vous constaterez que la page ne peut pas défiler, mais que la page peut être modifiée avec désinvolture, puis le swiper enregistré peut défiler. Cette raison est que le nœud de swiper initial n'a pas été créé avec succès et la valeur. La page a été pénétrée Couche par couche, la valeur de swiper peut être imprimée comme vide, et lorsque la valeur est modifiée, elle peut être transmise, nous devons donc ici mettre à jour la méthode siwper en jugeant si le nœud a réussi

Recommandations associées :

Tutoriel sur la mise en œuvre de la fonction de changement de carrousel d'images à l'aide du composant swiper WeChat Xiaocheng

Mise en œuvre de l'effet mobile CellSwiper

WeChat Un exemple de la façon dont un mini-programme peut obtenir l'effet non-swiper d'un onglet normal en haut

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!