脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue2项目之swiper.js 的使用

vue2项目之swiper.js 的使用

 更新时间：2023年12月10日 08:47:32   投稿：wdc  
这篇文章主要介绍了vue2项目之swiper.js 的使用,需要的朋友可以参考下

swiper.js 的使用

官网 API（部署在 swiper 实例中）：https://www.swiper.com.cn/api/index.html

官网轮播图（查看源代码）：https://www.swiper.com.cn/demo/index.html

接下来介绍怎么在 vue2 里使用 swiper.js （vue2 使用 swiper5版本）

1、安装、引入css

npm i swiper@5

// main.js

// 引入 swiper.css
import "swiper/css/swiper.css";

2、在组件中使用：引入 js 引入 html 结构

import Swiper from 'swiper'

html 结构：

1、开始先放个图片占个位置确定布局，再把图片换成下面的结构

2、注意最外层的 class="swiper-container" 必须！且后面的 swiper 实例也要改！

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(img,index) in bannerList" :key="index">
            <img :src="img.imgUrl" />
        </div>
    </div>

    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>

3、最后关键是创建 swiper 实例！ 有两种方式

方式一：

如果图片已经固定（或图片url数组已经确定 ）那么直接在 mounted 函数中创建

mounted() {
    // 下面是普通swiper模板
    new Swiper(".swiper-container", {
        loop: true,
        mousewheel: true,
        keyboard: true,

        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },

        pagination: {
            el: ".swiper-pagination",
        },                    
    });
}

方式二：

用到 v-for 遍历图片url数组（并且该数组是在本组件中通过发请求获取的），那么就要用到 watch + $nextTick

5.11.1 watch+$nextTick

当一个数据发生改变时，此时 DOM 还没有更新，所以在监视属性中的 handle 函数中 写一个 $nextTick 可以实现 数据发生改变且 DOM 更新后执行代码

回到 swiper ，我们在这个时候 创建 swiper 实例

bannerList：图片url数组

watch: {
    bannerList: {
        handler() {
            this.$nextTick(function() {
                new Swiper(".swiper-container", {
                    loop: true,
                    mousewheel: true,
                    keyboard: true,

                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },

                    pagination: {
                        el: ".swiper-pagination",
                    },                    
                });
            })
        }
    }
},

5.11.2 修改分页器样式

1、添加属性

pagination: {
    el: ".swiper-pagination",
    clickable: true,
    bulletClass : 'my-bullet', // 这个
    bulletActiveClass: 'my-bullet-active',
},

2、在组件里面写 css （不要加 scope）

// 分页器样式
.my-bullet{
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: black;
    opacity: 0.5;
    margin: 0 4px;
}

// 选中的分页器样式（会继承上面那个样式）
.my-bullet-active {
    background: #ff6600;
    opacity: 1;
}

5.11.3 封装轮播图组件

当一个图片需要变为轮播图时，我们把 img 标签 换成 Carousel 组件即可！

1、Carousel 组件需要一个参数：图片 url 数组

imgList = [
    {imgUrl: '...'}
    {imgUrl: '...'}
]

2、将 Carousel 组件注册为全局组件

// 在 components 中新建 Carousel 文件夹

// main.js
import Carousel from '@/components/Carousel'
Vue.component(Carousel.name,Carousel)

3、Carousel/index.vue （直接照搬即可 样式可自行修改）

<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(img,index) in imgList" :key="index">
                <img :src="img.imgUrl" />
            </div>
        </div>

        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
    </div>
</template>

<script>
    import Swiper from 'swiper'

    export default {
        name: 'Carousel',

        props: ['imgList'],

        watch: {
            imgList: {
                immediate: true,
                handler() {
                    this.$nextTick(function() {
                        new Swiper(".swiper-container", {
                            loop: true,

                            pagination: {
                                el: ".swiper-pagination",
                                clickable: true,
                                bulletClass : 'my-bullet',
                                bulletActiveClass: 'my-bullet-active',

                            },
                            
                            navigation: {
                                nextEl: ".swiper-button-next",
                                prevEl: ".swiper-button-prev",
                            },
                        });
                    })
                }
            }
        }
    }
</script>

<style lang="less">
    // 分页器样式
    .my-bullet{
        position: relative;
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        background: black;
        opacity: 0.5;
        margin: 0 4px;
    }

    // 选中的分页器样式（会继承上面那个样式）
    .my-bullet-active {
        background: #ff6600;
        opacity: 1;
    }
</style>

4、组件中使用（传入图片 url 数组即可）

<Carousel :imgList="bannerList" />

5.11.4 swiper 属性

1、 <div class="swiper-container">：为轮播图大盒子

2、<div class="swiper-slide">：为装图片的盒子，可以指定大小，那么图片直接适配。或者不指定大小，则需要指定图片大小。

3、slidesPerView：设置 轮播图大盒子 显示 轮播图 张数，轮播图 会被修改宽度适配 轮播图大盒子

4、slidesPerGroup：每次切换 轮播图 张数

5、给 <div class="swiper-slide"> 添加类名 swiper-no-swiping ：禁止滑动

以上就是vue2项目之swiper.js 的使用的详细内容，更多关于vue2项目之swiper.js 的使用的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 解决vue动态下拉菜单 有数据未反应的问题

    解决vue动态下拉菜单 有数据未反应的问题

    这篇文章主要介绍了解决vue动态下拉菜单 有数据未反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue 获取url参数、get参数返回数组的操作

    vue 获取url参数、get参数返回数组的操作

    这篇文章主要介绍了vue 获取url参数、get参数返回数组的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • TypeScript中集成Tween.js踩坑记录

    TypeScript中集成Tween.js踩坑记录

    这篇文章主要介绍了TypeScript中集成Tween.js踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • Vue.js结合SortableJS实现树形数据拖拽

    Vue.js结合SortableJS实现树形数据拖拽

    本文主要介绍了Vue.js结合SortableJS实现树形数据拖拽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vue3 组合式API defineEmits() 与 emits 组件选项详解

    vue3 组合式API defineEmits() 与 emits 组

    在Vue中,defineEmits()是Vue3组合式API中用于声明自定义事件的,而emits选项则用于Vue2和Vue3的选项式API中,defineEmits()允许使用字符串数组或对象形式声明事件,emits选项也支持这两种形式,且验证函数可以验证事件参数,这两种方法都是为了更规范地在组件间通信
    2024-09-09
  • Vue $emit $refs子父组件间方法的调用实例

    Vue $emit $refs子父组件间方法的调用实例

    今天小编就为大家分享一篇Vue $emit $refs子父组件间方法的调用实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 解决ant Design中this.props.form.validateFields未执行的问题

    解决ant Design中this.props.form.validateFields未执行的问题

    这篇文章主要介绍了解决ant Design中this.props.form.validateFields未执行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue如何获取参数方法的封装

    vue如何获取参数方法的封装

    文章介绍了如何在Vue.js中获取URL参数、定义和暴露公共方法、在main.js中引入并注册到Vue实例原型,以及页面中调用这些方法,作者分享了个人经验,希望对大家有所帮助
    2024-12-12
  • Vue首屏白屏问题的原因和解决方法讲解

    Vue首屏白屏问题的原因和解决方法讲解

    这篇文章主要介绍了Vue首屏白屏问题的原因和解决方法讲解，Vue首屏白屏问题是指在页面初次加载时，部分或全部内容无法正常显示，出现空白的情况。其原因可能是因为页面渲染速度过慢，或者是因为网络请求等问题导致数据无法及时加载
    2023-05-05
  • vue3如何实现在style中使用响应式变量

    vue3如何实现在style中使用响应式变量

    vue3已经内置了这个功能啦,可以在style中使用v-bind指令绑定script模块中的响应式变量,这篇文章我们来讲讲vue是如何实现在style中使用script模块中的响应式变量,感兴趣的朋友一起看看吧
    2024-07-07

最新评论