vue-awesome-swiper使用遇到的坑

最新推荐文章于 2023-07-25 14:30:30 发布

原创最新推荐文章于 2023-07-25 14:30:30 发布 · 964 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #css

本文介绍了在使用 VueAwesomeSwiper 的过程中遇到的问题及解决方案。首先，通过 npm 安装最新版本后发现轮播图的 pagination 不显示。为解决此问题，选择回退到 Swiper4 的 v3.1.3 版本，并详细说明了如何卸载旧版本、安装指定版本的步骤，以及在注册和使用过程中的注意事项，包括更改 CSS 和保持 swiperOptions 参数与 Swiper 官方 API 一致，最终成功实现 pagination 显示。

最新版使用

安装
最新版本使用 npm install swiper vue-awesome-swiper --save
安装后可以看到版本是这样的

注册

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper)

使用

<template>
  <div class="swiper">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="item in imgUrl" :key="item.id">
        <img class="swiper-img" :src="item.url"/>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: true
      },
      imgUrl: [
        {
          id: '01',
          url: './01.jpg'
        },
        {
          id: '02',
          url: './02.jpg'
        },
        {
          id: '03',
          url: './03.jpg'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  .swiper >>> .swiper-pagination-bullet-active//样式穿透
    background: #fff
  .swiper
    width: 100%
    height: 0
    padding-bottom: 31.25%
    overflow: hidden
    background-color: #eee
    .swiper-img
      width: 100%
</style>

看起来没什么毛病，但是轮播图的pagination不显示。。。
所以，还是切版本吧，最新的不适合我(⊙o⊙)…
赶紧先卸载 npm uninstall swiper vue-awesome-swiper --save

避坑

1.安装旧版本，需要指定哪个版本，这里选择 Swiper4 v3.1.3 版本
npm install vue-awesome-swiper@3.1.3 --save
在这里插入图片描述
2.注册与前面类似，只是把css更换下

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3.使用是一样的（swiperOptions中的参数同 swiper 官方 api 参数）
这时轮播图的pagination显示出来了，该是怎么样的就怎么样啦

vue-awesome-swiper使用遇到的坑

最新版使用

避坑

2 条评论