vue2项目之swiper.js 的使用
投稿:wdc
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 的使用的资料请关注脚本之家其它相关文章!