VUE——Swiper滑动特效插件【主要就是做轮播图】

时间sk

于 2025-05-31 20:13:02 发布

阅读量1.5k

点赞数 25

CC 4.0 BY-SA版权

分类专栏： VUE疑难杂症文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_63215361/article/details/148243119

VUE疑难杂症专栏收录该内容

45 篇文章

订阅专栏

Swiper(官网：https://www.swiper.com.cn/)
是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择，
也支持PC端，在这里我们使用稳定的3.4.2版本。
使用Swiper有两种方式：


1.CDN引入：
//引入压缩版CSS样式
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
//引入压缩版swiper.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
2.模块化
下载Swiper，由于Swiper支持commonJS规范，所以可以用import导入，支持模块化。

第一步：从Swiper(官网：https://www.swiper.com.cn/) 下载Swiper.3.4.2压缩包

第二步：单独建一个文件夹，把Swiper.3.4.2压缩包中的 wiper.js和swiper.css文件放入其中。

在这里插入图片描述

第三步：使用import模块化导入组件

将swiper.css导入< style>< /style>里
将swiper.js 导入< script></ script>里
在这里插入图片描述

第四步：在Swiper文档中查看Swiper初始化

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
<script> 
var mySwiper = new Swiper('.swiper-container', {
	autoplay: 5000,//可选选项，自动滑动
})
</script>

Swiper建议我们使用ref来获取元素
在这里插入图片描述

在这里插入图片描述

<template>
  <div>
    <div class="banner-wrap">
      <div class="swiper-container" ref="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in imglist " :key="index"><img :src=" item.image" /></div>
        </div>
        <div class="swiper-pagination" ref="swiper-pagination"></div>
      </div>
    </div>
  </div>
</template>

<script>
//import { nextTick } from "vue/types/umd";
//import { nextTick } from "vue/types/umd"
import Swiper from"../../assets/js/libs/swiper/swiper"
import{ requestfirst} from"../../assets/js/utils/request"
export default{
    name:"name-swiper",
    data(){
        return{
            imglist:[]
        }
    },
        created(){

                requestfirst(this.$config.baseApi+"/home/index/slide?token="+this.$config.token).then(res=>{
                    console.log(res);
                    if(res.code==200){
                        this.imglist=res.data;
                           
                            this.$nextTick( ()=>{
                                new Swiper(this.$refs['swiper-container'],{
                                autoplay: 3000,
                                pagination : this.$refs['swiper-pagination'],
                                paginationClickable :true,
                                autoplayDisableOnInteraction : false,
                                })

                            })



                    }

                })


        },



    // mounted(){

    //   new Swiper(this.$refs['swiper-container'],
    //   {  autoplay: 3000,
    //      pagination : this.$refs['swiper-pagination'],
    //      paginationClickable :true,
    //      autoplayDisableOnInteraction : false,
    //     })
    // }



}
</script>
<style>
@import"../../assets/js/libs/swiper/swiper.css";
.banner-wrap{width: 100%;height: 200PX;}
.swiper-container{width: 100%;height: 100%;}
img{width: 100%;height:100%;}
</style>

created中的数据请求：

在created中，调用了requestfirst来获取轮播图的数据。这个请求是异步的，意味着它不会阻塞后续代码的执行，而是会在请求完成后执行回调函数。

mounted中的Swiper初始化：

在mounted中，直接初始化了Swiper。但是，由于数据请求是异步的，mounted可能在数据请求完成之前就已经执行了。这意味着Swiper可能会在imglist为空的情况下初始化，导致轮播图无法正确显示。

this.$ nextTick的使用：

在created中的数据请求成功后，使用了this.$ nextTick来包裹Swiper的初始化代码。$nextTick的作用是等待DOM更新后再执行内部的代码。这样可以确保在数据更新后，DOM已经渲染完毕，Swiper可以正确地初始化

异步操作的影响：

在created中调用异步请求，比如requestfirst，这个请求不会阻塞created的执行，created会继续执行后续的代码。如果mounted在created之后执行，那么mounted可能会在数据请求完成之前执行，导致Swiper初始化时数据还没有准备好。

this.$nextTick的作用：

this.$ nextTick的作用是确保在DOM更新完成后执行内部的代码。在数据请求成功后，imglist被赋值，Vue会触发DOM更新。使用$nextTick可以确保在DOM更新完成后初始化Swiper，这样Swiper可以正确地找到所有的swiper-slide元素。

为什么在created中使用$nextTick来初始化Swiper，而不是直接在mounted中初始化？

因为mounted可能在数据请求完成之前执行，导致Swiper初始化时数据还没有准备好。使用$nextTick在数据请求成功后初始化，可以确保数据已经加载完成，DOM已经更新。

在created中使用$nextTick来初始化Swiper，确保在数据加载完成且DOM更新完成后进行初始化，避免Swiper初始化时数据未准备好。直接在mounted中初始化Swiper可能会导致Swiper在数据未加载完成的情况下执行，影响轮播图的显示效果。

关键时间节点：

created阶段：数据观测已初始化，但尚未生成真实DOM。

mounted阶段：真实DOM已挂载，但此时可能没有数据（请求未完成）。

危险操作：若在mounted直接初始化Swiper，可能遇到空DOM结构。

数据观测已初始化：

1. 什么是数据观测（Reactivity）
数据观测是Vue的响应式系统核心。当你在data()中定义数据时，Vue会将其转换为响应式对象。例如：

// 你写的data选项
data() {
  return { count: 0 }
}

const observedData = {
  _value: 0, // 实际存储值的内部属性
  // 定义 count 属性的 getter/setter
  get count() {
    track(this, 'count') // 1️⃣ 依赖收集：记录当前正在读取 count 的代码
    return this._value
  },
  set count(newVal) {
    this._value = newVal
    trigger(this, 'count') // 2️⃣ 触发更新：通知所有依赖 count 的代码更新
  }
}

3. track() 的作用
当任何代码读取 count 时，track() 会记录这个读取操作（收集依赖）。例如：
模板中的使用：{{ count }}
组件的计算属性：double() { return this.count * 2 }
当这些代码运行时，读取 count 会触发 track()

4. trigger() 的作用
当任何代码修改 count 时，trigger() 会通知所有依赖 count 的地方更新。例如：
点击按钮修改 count
this.count = 1
此时会触发所有依赖 count 的模板、计算属性、watch 等更新

5. this 的指向
在 getter/setter 中，this：当前数据对象（如 observedData 的实例）

在这里插入图片描述