Vue 组件 - Swiper

最新推荐文章于 2025-04-28 19:39:21 发布
最新推荐文章于 2025-04-28 19:39:21 发布
阅读量900 收藏 19
点赞数 18
分类专栏： 前端 # Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/json_ligege/article/details/147244508
版权

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

目录

Swiper

Swiper静态

下载swiper

引入swiper

简单轮播

Swiper动态

封装swiper组件

引入vue

封装组件

更新中实例化

这种写法弊端

优化

防止复用

第一种

第二种

增加循环

总结

Swiper

综合运用，创建一个轮播组件；轮播组件的封装

Swiper静态

直接下载swiper中的js和css在静态网页中引用css和js。

下载swiper

Swiper网址 下载Swiper - Swiper中文网

下载后解压使用这如下两个文件。

 

引入swiper

创建目录后，把swiper的js和css文件放入。

示例如下：

 

简单轮播

依照官网使用示例，做一个简单的静态轮播。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./swiper/swiper-bundle.css">
    <style>
        .swiper {
            width: 600px;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
<script src="./swiper/swiper-bundle.js"></script>
<script>
    var mySwiper = new Swiper ('.swiper', {
        direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    })
</script>
</body>
</html>

 

Swiper动态

把静态轮播改为动态获取数据后，渲染swiper轮播内容。

在init函数中处理new swiper。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./swiper/swiper-bundle.css">
    <style>
        .swiper {
            width: 600px;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
<script src="./swiper/swiper-bundle.js"></script>
<script>
    setTimeout(()=> {
        var list = ["11111", "22222", "33333"]
        var newlist = list.map(item=>`<div class="swiper-slide">${item}</div>`)

        var owrapper = document.querySelector(".swiper-wrapper")
        owrapper.innerHTML = newlist.join('')

        // dom插入完之后， new swiper
        init()
    }, 2000)

    // 初始化 swiper
    function init() {
        console.log("初始化")
        new Swiper ('.swiper', {
            direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        })
    }
</script>
</body>
</html>

 

封装swiper组件

利用之前学到的生命周期来封装一个swiper组件。

引入vue

创建文件后，引入vue.js文件。

示例如下：

<script src="../lib/vue.js"></script>

 

封装组件

把原来的轮播使用vue封装为组件，方便调用。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="./swiper/swiper-bundle.css">
  <style>
    .swiper-container {
      width: 600px;
      height: 300px;
    }
  </style>
</head>
<body>
<div id="box">
  <header>导航</header>
  <div class="swiper-container demo">
    <div class="swiper-wrapper">
      <!--<div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>-->
      <div class="swiper-slide" v-for="data in datalist" :key="data">
        <img :src="data" alt=""/>
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
  <footer>底部内容</footer>
</div>
<script src="./swiper/swiper-bundle.js"></script>
<script src="../lib/vue.js"></script>
<script>

  new Vue({
    el: '#box',
    data: {
      datalist:[],
    },
    mounted() {
      // ajax
      setTimeout(()=> {
        this.datalist = ["https://tsj.youdubook.com/cover/book_cover_1372.jpg",
        "https://tsj.youdubook.com/cover/book_cover_6.jpg",
        "https://tsj.youdubook.com/cover/book_cover_265.jpg",
        "https://tsj.youdubook.com/cover/book_cover_2819.jpg",
        "https://tsj.youdubook.com/cover/book_cover_219.jpg"]
      }, 2000)

      // 此时过早
    },
  })
</script>
</body>
</html>

 

更新中实例化

异步的请求数据，直接在创建完成时去实例化轮播组件，会无法渲染列表；

因为这时dom还在diff比对获取的是空列表。需要在更新后再去实例化。

示例如下：

updated() {
  console.log(document.querySelectorAll(".swiper-slide").length)
  new Swiper(".demo", {
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    loop:true,
    autoplay: {
      delay: 2500,
      disableOnInteraction:false
    }
  })
}
这种写法弊端

1.无法复用

2.如果当前页面并非只有datalist，还有其他状态更新也会触发生命周期的更新阶段。

优化

对原来的写法进行优化。把轮播功能封装为轮播容器和轮播内容两个组件，在组件挂载后实例化swiper；通过vue请求并更新数据。在页面中使用组件控件和slot插槽渲染页面内容。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./swiper/swiper-bundle.css">
</head>
<body>
<div id="box">
    <swiper>
        <!--改为动态数据-->
        <swiper-item v-for="data in datalist"  :key="data">
            <img :src="data" alt="">
        </swiper-item>
    </swiper>
</div>
<script src="./swiper/swiper-bundle.js"></script>
<script src="../lib/vue.js"></script>
<script>
    Vue.component("swiperItem", {
        template:`
        <div class="swiper-slide">
            <slot></slot>
        </div>
        `
    })

    Vue.component("swiper", {
        template:`
        <div class="swiper-container demo">
            <div class="swiper-wrapper">
              <slot></slot>
            </div>
            <div class="swiper-pagination"></div>
      </div>`,

        // 组件挂载后 直接示例swiper
        mounted() {
            new Swiper(".demo", {
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },
                loop:true,
                autoplay: {
                    delay: 2500,
                    disableOnInteraction:false
                }
            })
        }
    })

    // vue去请求并更新数据
    new Vue({
        el: '#box',
        data: {
            datalist:[],
        },
        mounted() {
            // ajax
            setTimeout(()=> {
                this.datalist = ["https://tsj.youdubook.com/cover/book_cover_1372.jpg",
                    "https://tsj.youdubook.com/cover/book_cover_6.jpg",
                    "https://tsj.youdubook.com/cover/book_cover_265.jpg",
                    "https://tsj.youdubook.com/cover/book_cover_2819.jpg",
                    "https://tsj.youdubook.com/cover/book_cover_219.jpg"]
            }, 2000)
        }
    })
</script>
</body>
</html>

防止复用

防止swiper复用的方式。

第一种

在异步情况下swiper要增加key绑定数组长度。防止swiper复用。

示例如下：

<swiper>
    <!--改为动态数据-->
    <swiper-item v-for="data in datalist" :key="data">
        <img :src="data" alt="">
    </swiper-item>
</swiper>

 

第二种

通过if判断列表的长度。

示例如下：

<div id="box">
    <swiper v-if="datalist.length">
        <!--改为动态数据-->
        <swiper-item v-for="data in datalist" :key="data">
            <img :src="data" alt="">
        </swiper-item>
    </swiper>
</div>

 

增加循环

在轮播到最后一个时，需要进行循环。

在组件使用时传递属性，在加载完成时使用属性。

组件使用时传递loop属性

示例如下：

组件中接收loop属性值。

示例如下：

在组件实例化swiper时，使用传递的loop属性值。

示例如下：

 

对传值进行限制和设置默认值。

示例如下：

props:{
    loop: {
        type:Boolean,
        default:true
    }
},

 

总结

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

基于Vue的简易Swiper组件
missyoueverytime的博客
11-02 320
目前该swiper组件未设轮播点，可自行添加轮播点。
vue中使用swiper插件
qq_22905801的博客
02-26 6034
完整代码：OK今天给大家介绍一下vue2中使用swiper插件，以及在使用中需要的问题，比如说在使用时轮播图失效的情况的解决。由下图可以看到现在swiper已经更新到了8版本了，但是需要注意的是5以上的版本是为了vue3服务的，使用时多多少少会有谢问题。如果感兴趣的话可以看看官网的介绍swiper中文官网。这里我先给出官网介绍的使用步骤，但是它是在html中使用的并且在vue2中使用也有点问题初始化：这里需要说明的是我这里是将轮播图组件Carousle单独抽离出来封装的。
vue2.0的swiper轮播展示
weixin_46065170的博客
10-24 1921
注意：此时若是报错，找不到某个组件之类的，就是swiper版本不对，引入swiper.css的时候需要找到确切的位置，可以尝试从网上找到几个较为常见的引入的写法，例如：import ‘swiper/css/swiper.css’ 之类的。注意：为了避免swiper的样式在less中不起作用，可以直接在style标签下重写swiper分页器的css，重新定义分页器的位置和颜色。其他为了美观，添加圆角、背景之类的样式就可以随便写！由于是在移动端进行修改，用media进行控制样式。在页面中引入swiper。
Swiper 在 Vue 中的使用指南
最新发布
jingling555的博客
04-28 1024
模板部分：使用swiper和swiper-slide组件创建轮播结构 导入模块：导入 Swiper 核心组件、需要使用的模块（如分页、导航）以及相关样式 配置参数：在 setup 函数中配置 Swiper 的模块和参数 样式设置：为 Swiper 容器和滑动项设置基本样式
Vue使用Swiper组件
m0_65179181的博客
08-13 2481
swiper-button-pre swiper-button-pre 左右切换箭头。因为swiper每个版本使用方法不一样，这里使用相对稳定的版本使用。pagination 小圆点。
vue-swiper
未玄的博客
11-08 263
引入 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper) 使用 &lt;div class="slider"&gt; &lt;swiper :options="swiperOption" ref=...
基于vue.js轮播组件vue-awesome-swiper实现轮播图
12-03
<swiper-slide>slide1</swiper-slide> <swiper-slide>slide2</swiper-slide> <!-- 以下控件元素均为可选 --> <div class="swiper-pagination" slot="pagination"> <div class="swiper-button-prev" slot=...
vue引入新版 vue-awesome-swiper插件填坑问题
08-28
同时，需要在模板中使用 `<swiper>` 和 `<swiper-slide>` 组件。 解决方案 以下是解决上述问题的解决方案： 1. 在 main.js 文件中引入 `import 'swiper/dist/css/swiper.css'`。 2. 在组件中引入 `import { ...
vue轮播图插件vue-awesome-swiper的使用代码实例
12-02
在你的Vue组件模板中，你可以使用`<swiper>`和`<swiper-slide>`组件来创建轮播图。例如： ```html <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="item in items"></swiper-slide> ...
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
10-16
总结来说，Vue-Awesome-Swiper是一个强大的Vue组件，它允许开发者在Vue项目中轻松实现各种复杂的轮播效果，包括旋转叠加和平移轮播等。开发者可以通过阅读文档、查看示例以及结合本文内容，快速上手并实现富有吸引力...
VueSwiper实现的一套轮播滑动组件API参照Swiper
08-10
Swiper(Swiper3) component for Vue.js(1.X ~ 2.X), support pc and mobile, SPA and SSR.
vue-swiper组件
qq_46606159的博客
03-22 220
自定义封装swiper组件（基于swiper） 注意： 防止swipe初始化过早 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Examples</title> <script type="text/javascript...
vue使用swiper组件
weixin_52923266的博客
03-11 1248
swiper一次轮播只能显示一条数据,如果要显示多条怎么办呢,直接看下边完整的demo!
VUE-组件swiper
放荡不羁爱自由
09-03 240
待更新。
Vue系列——vue2封装swiper轮播组件
2401_84434331的博客
04-27 874
data(){return {//图片路径listImg:[},},// 如果需要前进后退按钮},},})
vue使用swiper插件
imsopoor的博客
08-22 524
昨天搞这个插件，搞得我很生气！ 我只是要个最简单的移动端轮播图，整的我心态本类 能够自动播放，循环就行。。 但是找了一圈，一直报错 还有就是，我获取图片是通过接口的，所以用到了v-for循环 就会出现无法循环播放问题 只要加上 v-show="banners.list.length" banner.list是存放图片的一个数组 就行 我是在组件内导入，不是全局引入 安装 npm install vue-awesome-swiper@3 --save 引入，注册 import { swiper, swip
vue swiper
liangronghui123的博客
09-02 209
https://github.surmon.me/vue-awesome-swiper/ 1、安装 npm install vue-awesome-swiper --save-dev 2、在vue中引入 进入maim.js文件 import vueSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(vueSwiper) 3、进入轮播图组件中 <.
vue项目中使用swiper插件
Darling_DL的博客
05-16 1171
【代码】vue项目中使用swiper插件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JSON_L

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值