最近开发中遇到了使用swiper组件时候一直报错问题,后来发现是版本导致的问题
在这里插入图片描述

1.下载这两个版本插件:
“swiper”: “^4.5.1”,
“vue-awesome-swiper”: “^4.0.4”,

npm install vue-awesome-swiper@4.0.4 --save -dev
npm install swiper@4 --save -dev

2.在xxxx.vue的组件中引入

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  name: "index",
  components: {
    swiper,
    swiperSlide
  }, 
};
</script>

3.在div中使用

<swiper ref="mySwiper" v-bind:options="swiperOptions">
          <swiper-slide v-for="(item, index) in slideList" :key="index">
            <a v-bind:href="'/#/product' + 'item.id'">
              <img v-bind:src="item.img" alt />
            </a>
</swiper-slide>
Logo

前往低代码交流专区

更多推荐