Relevant steps for vue+swiper component development

This time I will bring you the steps related to vue swiper component development, what are the precautions for vue swiper component development, the following is a practical case, let’s take a look .

swiper’s components

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

Component method called by home.vue

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

Problem: If you simply call the _initSwiper method, you will find that the page cannot be scrolled, but the page can be modified casually, and then the saved swiper can be scrolled. The reason is that the initial swiper node was not created successfully, and the value page is not scrollable. In, the value of swiper can be printed layer by layer as empty, and the value can be passed in when modifying something, so here we need to update by judging whether the node is successful. siwper's method

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Let .vue be highlighted in Sublime Text’s new template

Node.js environment variable process Detailed explanation of .env usage

The above is the detailed content of Relevant steps for vue+swiper component development. For more information, please follow other related articles on the PHP Chinese website!