H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】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,属性,会有很大差异。

本文地址:H5W3 » 【前端技术】vue awesome swiper

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址