vue-awesome-swiper

效果图

问题

原因 && 版本不一致导致

版本不一致导致，
如果是新版swiper，css地址是    import 'swiper/swiper-bundle.css'
具体参考最新https://swiperjs.com/get-started/

解决方案: vue-awesome-swiper 版本号 3.1.3

注意点: Vue 是 单向数据流 所以 接受过来的prop 值 不能直接改变, 需要watch 传过来的值, 在data创建一个变量 来接受每次改变后的 值(不然会报错)如下:

场景: 轮播失效

在vue项目中经常会用轮播图，我一般用vue-awesome-swiper这个插件。我们轮播图片一般通过后端获取，循环展示，但会出现循环轮播失效的问题。原因是循环还没有完的时候swiper组件运行冲突出错导致的，在swiper组件上对数据价格v-if就可以解决。代码如下：

左右箭头

dom

配置 option

封装组件 vue-awesome-swiper 版本号 3.1.3

<template>
  <div class="container_carousel4">
    <swiper
      :options="swiperOption"
      ref="mySwiper"
      class="container_swiperItem"
      v-if="listCopy.length > 0"
    >
      <template v-for="(item, index) of listCopy">
        <swiperSlide :key="index">
          <div class="swiperItem">
            <img :src="item.image_url" @click="jump(item)" style="width:400px;" />
            <div>{{ item.name }}</div>
          </div>
        </swiperSlide>
      </template>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="swiper-button-prev" v-if="$route.name == 'dashboard'"></div>
    <div class="swiper-button-next" v-if="$route.name == 'dashboard'"></div>
  </div>
</template>

<script>
// import 'swiper/dist/css/swiper.css'
import 'swiper/swiper-bundle.css' //最新版本
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { mapActions } from 'vuex'
export default {
  name: 'carousel5',
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      show: true,
      timeout: null,
      listCopy: []
    }
  },
  props: {
    swiperOption: {
      // 原生swiper配置项
      type: Object,
      default() {
        return {
          direction: 'horizontal', // horizontal vertical
          initialSlide: 0,
          width: 1400, // swiper宽
          maxWidth: 1400,
          height: 400, // swiper高
          slidesPerView: 3, // 容器内显示数量
          spaceBetween: 80,
          loop: true,
          speed: 500,
          observer: true,
          observerParents: true,
          observeSlideChildren: true,
          grabCursor: true, // 手形
          autoplay: {
            delay: 2000,
            disableOnInteraction: false // 拖动后不取消autoplay
          },
          pagination: {
            el: '.swiper-pagination'
          },
          navigation: {
            prevEl: '.swiper-button-prev',
            nextEl: '.swiper-button-next'
          }
        }
      }
    },
    swiperStyle: {
      // 组件配置样式
      type: Object,
      default() {
        return {
          width: 390, // 组件宽
          height: 900, // 组件高
          backgroundColor: 'transparent' // 容器背景色
        }
      }
    },
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  watch: {
    list: {
      handler(nv) {
        this.listCopy = nv.concat(nv)
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    jump(item) {
      window.open(item.link_url)
    }
  }
}
</script>

<style scoped lang="scss">
.container_carousel4 {
  overflow: hidden;
  position: relative;
  width: 100%;

  .container_swiperItem {
    margin: 0 auto;
    max-width: 1400px;
    width: 1400px !important;
    padding: 0 50px 0 35px;
    .swiperItem {
    }
  }
  .swiper-button-prev {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 15rem;
    background: #ac2424;
    background-size: 100% 100%;
    color: #fff;
  }
  .swiper-button-next {
    width: 30px;
    height: 15rem;
    background: #ac2424;
    background-size: 100% 100%;
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
  }
}
</style>

配置参考

https://www.cnblogs.com/xiaocaiyuxiaoniao/p/10521462.html