Vue Swiper组件实现记录

更新时间：2025年07月21日 09:32:32 作者：JSON_L

文章讲解Vue2中使用Swiper组件的实现步骤,包括版本适配、组件结构搭建、依赖安装、ESLint配置、数据加载与图片路径处理,以及响应式样式设置,确保组件正常运行,感兴趣的朋友跟随小编一起看看吧

Swiper组件

下载swiper

首先下载swiper组件

注意与vue版本相符的swiper，因为是vue版本为2，故下载swiper@5

不指定版本号的话，会下载最新的版本，可能会有适配问题。

在命令行输入

npm i --save swiper@5

或者

npm install swiper@5

因为我的下载时，提示有依赖问题，所以是使用以下命令：

npm install swiper@5 --legacy-peer-deps

安装成功界面：

创建swiper组件

views里放页面组件；mycomponents中放公共组件或者子组件。

在src/mycomponents/films文件夹下创建FilmSwiper.vue组件。

创建后目录如下：

保存时修复

彻底关闭规则检查 no-new

自动控制eslint检查提醒最后保存时再修复。

在.eslint.js中设置如下：

编写swiper内容

把原来的swiper组件按照单文件组件创建组件写入

但是需要修改swiper的new方式。

示例如下：

<template>
    <div class="swiper-container demo">
    <div class="swiper-wrapper">
     <slot></slot>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>
<script>
export default {
  props: {
    loop: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    new Swiper('.demo', {
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination'
      },
      loop: this.loop,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false
      }
    })
  }
}
</script>

引入swiper

在films/FilmSwiper.vue中引入swiper。

示例如下：

使用swiper

在FilmsView.vue页面中使用swiper组件；首先需要引入FilmSwiper组件。

示例如下：

<template>
    <div>
        <film-swiper>
          <div class="swiper-slide">11111111</div>
          <div class="swiper-slide">22222222</div>
          <div class="swiper-slide">33333333</div>
        </film-swiper>
        <div>
            二级的声明式导航
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
import filmSwiper from '@/mycomponents/films/FilmSwiper'
export default {
  components: {
    filmSwiper
  }
}
</script>

Swiper子组件

创建Swiper列表组件

修改filmsView.vue页面中列表内容封装为组件。

也就是以下圈着的部分，把这块封装为组件：

在mycomponents/films下创建FilmSwiperItem.vue。

内容如下：

<template>
    <div class="swiper-slide">
        <slot></slot>
    </div>
</template>

使用子组件

导入到FilmsView.vue中，然后注册组件，最后使用组件替换原来的div列表。

示例如下：

<template>
    <div>
        <film-swiper>
          <film-swiper-item>11111111</film-swiper-item>
          <film-swiper-item>22222222</film-swiper-item>
          <film-swiper-item>33333333</film-swiper-item>
        </film-swiper>
        <div>
            二级的声明式导航
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
import filmSwiper from '@/mycomponents/films/FilmSwiper'
import filmSwiperItem from '@/mycomponents/films/FilmSwiperItem'
export default {
  components: {
    filmSwiper,
    filmSwiperItem
  }
}
</script>

增加生命周期

改为从生命周期中加载列表数据，然后渲染列表。

设置data和生命周期mounted函数。

示例如下：

<template>
    <div>
        <!-- 增加判断 数据加载完成后渲染 -->
        <film-swiper :key="datalist.length">
          <film-swiper-item v-for="data in datalist" :key="data">{{data}}</film-swiper-item>
        </film-swiper>
        <div>
            二级的声明式导航
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
import filmSwiper from '@/mycomponents/films/FilmSwiper'
import filmSwiperItem from '@/mycomponents/films/FilmSwiperItem'
export default {
  data () {
    return {
      datalist: []
    }
  },
  mounted () {
    // 模拟获取后端数据
    setTimeout(() => {
      this.datalist = ['11111111', '22222222', '33333333']
    }, 1000)
  },
  components: {
    filmSwiper,
    filmSwiperItem
  }
}
</script>

增加图片显示

整理banner数据到banner.json文件中，放入到public下：

加载数据

在生命周期mounted函数中，修改为使用axios请求本地banner.json文件中的数据。

并赋值到datalist中。

示例如下：

export default {
  data () {
    return {
      datalist: []
    }
  },
  mounted () {
    // 模拟获取后端数据
    // setTimeout(() => {
    //   this.datalist = ['11111111', '22222222', '33333333']
    // }, 1000)
    axios.get('/banner.json').then(res => {
      console.log(res.data.data)
      this.datalist = res.data.data
    })
  },

渲染修改

渲染列表时修改key绑定字段和图片渲染字段。

示例如下：

<film-swiper :key="datalist.length">
          <film-swiper-item v-for="data in datalist" :key="data.book_id">
            <img :src="data.cover" alt="">
          </film-swiper-item>
        </film-swiper>

图片链接处理

图片链接使用的是相对路径，通过过滤器对图片链接进行拼接域名，

示例如下：

import Vue from 'vue'
// 使用过滤器 处理图片链接
Vue.filter('getImg', (path) => {
  return 'https://www.matiji.net' + path
})

图片样式设置

在图片的父级上增加类设置并对图片进行响应式样式设置。

设置类

设置样式

<style lang="scss" scoped>
.filmSwiperItem {
  img {
    width: 100%;
  }
}
</style>

总结

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue Swiper组件实现笔记

到此这篇关于Vue Swiper组件的文章就介绍到这了,更多相关Vue Swiper组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue Socket.io源码解读
这篇文章主要介绍了Vue Socket.io源码解读，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
vue+elementUI中的滚动条el-scrollbar使用及说明
文章介绍了如何在Vue和ElementUI中使用`el-scrollbar`组件来替换原生滚动条,并提供了一个示例代码,同时,文章分享了隐藏横向滚动条的经验,通过调整CSS样式解决了原生滚动条显示的问题
2026-02-02
vue3+arco design通过动态表单方式实现自定义筛选功能
这篇文章主要介绍了vue3+arco design通过动态表单方式实现自定义筛选,本文主要实现通过动态表单的方式实现自定义筛选的功能,用户可以自己添加筛选的项目,筛选条件及筛选内容,需要的朋友可以参考下
2024-05-05
vue快速入门基础知识教程
VUE是一套前端框架，免除了原生JavaScript中的DOM操作，简化书写。VUE基于MVVM（Model-View_ViewModel）思想，实现数据双向绑定。Vue的核心库只关注图层.响应式数据绑定和组件化开发是其两大特点。
2023-01-01
基于vue.js实现购物车
这篇文章主要为大家详细介绍了基于vue.js实现购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
图文详解Element-UI中自定义修改el-table样式
elementUI提供的组件间距、样式都比较大,如果直接套用,在页面显示可能就会显得很大,就比如表格,表头、行宽如果不修改的话,遇到列较多的时候,会显得整个页面就不好看,下面这篇文章主要给大家介绍了关于Element-UI中自定义修改el-table样式的相关资料,需要的朋友可以参考下
2022-08-08
Vue Router的懒加载路径的解决方法
这篇文章主要介绍了Vue Router的懒加载路径的解决方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-06-06
vue3 setup中defineEmits与defineProps的使用案例详解
在父组件中定义String、Number、Boolean、Array、Object、Date、Function、Symbol这些类型的数据,使用defineEmits会返回一个方法,使用一个变量emits(变量名随意)去接收,本文给大家介绍vue3 setup中defineEmits与defineProps的使用案例,感兴趣的朋友一起看看吧
2023-10-10
Vue非父子组件之间的通信方式详解
在实际业务中,除了父子组件通信外,还有很多非父子组件通信的场景,下面这篇文章主要给大家介绍了关于Vue非父子组件之间的通信方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
一篇文章，教你学会Vue CLI 插件开发
这篇文章主要介绍了Vue CLI插件开发，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04