Detailed explanation of vue swiper implementation of component development-JS Tutorial-php.cn

Detailed explanation of vue swiper implementation of component development

小云云

Release： 2018-05-24 14:33:06

Original

2563 people have browsed it

I don’t know how much you know about swiper. This article mainly introduces the relevant information about vue+swiper to achieve component development. Friends who need it can refer to it. I hope it can help everyone.

Swiper's component

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

Copy after login

Home.vue component method called

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

Copy after login

Problem: If you simply call _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. This reason is that the initial swiper node was not created successfully, and the value page is penetrated, layer by layer. The value of swiper can be printed as empty, and the value can be passed in when the value is modified, so here we need to update the siwper method by judging whether the node is successful

Related recommendations:

Tutorial on how to implement the image carousel switching function using the WeChat applet swiper component

Implementation of mobile effect CellSwiper

How to implement the WeChat applet Example of the non-swiper effect of the top normal tab

The above is the detailed content of Detailed explanation of vue swiper implementation of component development. For more information, please follow other related articles on the PHP Chinese website!