0
  1. 在A项目中,使用VueAwesomeSwiper
<div class="wrapper">
    <swiper :options="swiperOption" >
        <swiper-slide v-for="item in list" :key="item.id">
          <img class="swiper-img" :src="item.src">
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div> 
    </swiper>
  </div>

js部分代码:

swiperOption: {
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          observeParents: true,
          observer: true
        },
        mylist: this.list
      }

ok 这样swiper 是可以出来的

但是改成

pagination: '.swiper-pagination'

就出不来了,如图,swiper-pagination 中元素为空

图片描述

B 项目中,

<div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper">
        <swiper-slide v-for="item in list" :key="item.id">
          <img class="swiper-img" :src="item.src">
        </swiper-slide>
    </swiper>
    <div class="swiper-pagination"  slot="pagination"></div>
  </div>

配置为:

swiperOption: {
    pagination: '.swiper-pagination',
    loop: true,
    autoPlay: true
  }

pagination 改成便显示不出来
{
    el: '.swiper-pagination',
    clickable: true
  },

天地良心,我在main.js 中引用的都是一致的,

import VueAwesomeSwiper from 'vue-awesome-swiper'

什么原因 改个配置还显示不出来了?

按道理说 VueAwesomeSwiper 是基于 swiper4开发的,是支持 pagination
配置成对象的,但是为啥A项目换成B项目的配置就不行,B也是,我真没看出哪儿有啥区别

7月14日提问
1 个回答
0

后续原因和解决:两个项目引入的vue-awesome-swiper版本不一致
"vue-awesome-swiper": "^3.1.3",
"vue-awesome-swiper": "^2.6.7",
可以参考这篇文章

官网文档

撰写答案

推广链接