关于vue.js:vue-awesome-swiper

vue awesome swiper 实战，踩坑

install

npm install swiper vue-awesome-swiper –save

留神版本
vue-awesome-swiper@4.1.1
swiper@5.2.0

默认装置的是最新的，npm ls swiper 或者
npm ls vue-awesome-swiper 之后会发现版本匹配问题！

留神版本：

此处版本是个坑，版本不匹配，文件门路都不统一，必定会有问题！！
不阐明版本的 demo 都是耍流氓！！

抽出独自组建 BannerSwiper.vue;
Home.vue 中应用 BannerSwiper

代码如下：

BannerSwiper.vue

<template>
   <div v-swiper:mySwiper="swiperOption" class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in banners" :key="index">
        <a :href="item.link">
          <img class="img" :src="item.image"/>
        </a>
      </div>
    </div>
    <div class="swiper-pagination" slot="pagination"></div>
  </div>
</template>

<script>
import {Swiper, SwiperSlide, directive} from "vue-awesome-swiper";
import "swiper/css/swiper.css";
// If you use Swiper 6.0.0 or higher
// import "swiper/swiper-bundle.css";
export default {
  name: "BannerSwiper",
  props: {
    banners: {
      type: Array,
      default: [],},
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {swiper: directive,},
  data() {
    return {
      swiperOption: {
        autoplay: {
          disableOnInteraction: false, // 用户操作后是否禁止主动循环
          delay: 1000, // 自主动循环工夫
        }, // 可选选项，主动滑动
        speed: 1000, // 切换速度，即 slider 主动滑动开始到完结的工夫（单位 ms）loop: true, // 循环切换
        grabCursor: true, // 设置为 true 时，鼠标笼罩 Swiper 时指针会变成手掌形态，拖动时指针会变成抓手形态
        // setWrapperSize: true, //Swiper 应用 flexbox 布局 (display: flex)，开启这个设定会在 Wrapper 上增加等于 slides 相加的宽或高，在对 flexbox 布局的反对不是很好的浏览器中可能须要用到。autoHeight: true, // 主动高度。设置为 true 时，wrapper 和 container 会随着以后 slide 的高度而发生变化。scrollbar: ".swiper-scrollbar",
        mousewheelControl: true, // 设置为 true 时，能应用鼠标滚轮管制 slide 滑动
        observeParents: true, // 当扭转 swiper 的款式（例如暗藏 / 显示）或者批改 swiper 的子元素时，主动初始化 swiper
        pagination: {
          el: ".swiper-pagination",
          // type : 'progressbar', // 分页器形态
          clickable: true, // 点击分页器的批示点分页器会管制 Swiper 切换
        },
        // navigation: {
        //   nextEl: ".swiper-button-next",
        //   prevEl: ".swiper-button-prev",
        // },
      },
    };
  },
  computed: {swiper() {return this.$refs.mySwiper}
    },
    mounted() {console.log('Current Swiper instance object', this.swiper)
      this.mySwiper.slideTo(1, 1000, false)
    }
};
</script>

<style lang="scss" scoped>
.swiper {
  height: 216px;
  .swiper-slide {
    background-position: center;
    background-size: cover;
  }
}
.img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
</style>

Home.vue

<!-- -->

<template>

<div id="home">
<banner-swiper :banners="banners" />
</div>

</template>

<script>

// 你本人的 BannerSwiper.vue 门路 !!!!
import BannerSwiper from "./ChildComps/BannerSwiper";

export default {

name: "Home",
components: {BannerSwiper},

data() {
  return {banners: [],
};

},

created() {

//1. 申请 banner 数据

this.getBannerData();},

methods: {getBannerData() {getBannerData().then((res) => {this.banners = res.data.banner;// 拉取的数据});

},

},

};

</script >

<style scoped>
//style
}

</style>

总结：折磨了好几天，终于搞进去了，自己也是初学者，各种 demo, 官网，搜了半天，搞进去的。
1 多练，多总结，高级用法相熟了，看问题的深度，角度都会不一样。
2 多看源码，从源码中发现问题。
3 肯定要留神版本，各种 api，属性，会有很大差别。