r-swiper 极致丝滑的 Vue3 轮播组件
站长
· 阅读数 13
r-swiper vue3版本 含有禁止滑动块、快速连播模式，完美解决移动/PC端轮播需求
这是一个vue3版本的轮播插件,移动端和pc端都已完美适配.
可能有小伙伴会问了，都2023年了，市面上的轮播组件数不胜数，谁还会傻到造轮播的轮子啊？
啊这。。。
不是说存在即合理吗
原因吗，主要有两点
1、如果引入官方swiper包会不会太大了，有必要吗?
2、有其他体积小的vue3开源组件，大部分场景都能适配，也多次遇到过特殊需求，无奈只能多次更改源码
But Please: Don't Repeat Yourself!
既然如此，那我就来封装一个功能强大，动效精美的轮播组件，可以完美适配绝大部分正常的业务需求（如果这个组件还满足不了你的需求，本着忍一时越想越气,退一步越想越亏的原则，我劝你即刻去找产品对线。。。啊不，即刻联系我，我看看能不能再优化一下）。
此插件含有 禁止滑动块模式(noMove属性) 可以在swiper轮播内部实现阻拦滑动效果 丝滑模式(fast属性), 连续切换时, 没有强制限制动画时间, 切换快慢只取决于你的手速, 德芙~纵享丝滑 可嵌套使用, 目前遇到的所有bug都已更改
第一次写轮播还是17年,用的jQuery, 代码已经找不到了, 这次浏览了多个swiper开源代码，综合整理，做了部分优化，如果感觉不流畅或者对此插件有修改建议请及时联系我(联系方式在最底部), 最后希望大家能够喜欢！
安装依赖
- 打开项目根目录，执行命令
// 如果使用的是npm npm i r-swiper // 如果使用的是yarn yarn add r-swiper
引入依赖
安装依赖后根据自己的需求引入
-
全局引入
// 10.25k 目前体积还可以接受 import Swiper from 'r-swiper' // ... 创建 app ... app.use(Swiper) -
局部引入
<scriipt setup> // Composition 组合式API引入 import {rSwiper, rSlide} from 'r-swiper' </script> // Options 选项式API引入 <script> import {rSwiper, rSlide} from 'r-swiper' export default { components: { 'rSwiper': rSwiper, 'rSlide': rSlide } } </script>
组件讲解
| 名称 | 介绍 |
|---|---|
| rSwiper | 外部组件，各种事件动效都在此内完成 |
| rSlide | 内部组件，包裹各个轮播页面内容 |
props参数 (一律使用小驼峰命名)
| 名称 | 默认值 | 类型 | 介绍 |
|---|---|---|---|
| fast | false | Boolean | 是否为快速滑动，纵享丝滑模式 |
| autoPlay | false | Boolean | 是否自动轮播播放 |
| playTime | 5000 | Number,Sting | 自动播放切换时间 |
| speed | 500 | Number, String | 切换页面后的动画过渡时间 |
| therehold | 100 | Number | 滑动多少距离后触发切页函数 |
| slide | 0 | Number | 初始默认下标 |
| indicator | true | Boolean | 指示器显示? 底部居中闪烁点/条状 |
| indicatorFlash | true | Boolean | 指示器闪烁动效 |
| noMove | cs | String | 非滑动模式 className(一会重点讲) |
| mobile | false | Boolean | 是否为移动端(移动端会隐藏 左右切页按钮) |
| vLock | false | Boolean | 垂直方向是否可滚动 |
methos事件
| 类型 | 名称 | 介绍 |
|---|---|---|
| ref事件 | refDom.prev() | 切换到上一页 |
| / | refDom.next() | 切换到下一页 |
| / | refDom.slideTo(i) | 切换到指定下标(i)页 |
| emit事件 | @loadEnd | 初次渲染完成后反馈函数 |
| / | @transitionend(i) | 切换页面后反馈函数, i 为当前下标 |
代码案例
<template>
<div class="home-style">
<rSwiper ref="swiperDOM" class="swiper" @loadEnd="funLoadEnd" @transitionend="funTransitionend">
<rSlide>
<div class="box"></div>
</rSlide>
<rSlide>
<div class="box box2"></div>
</rSlide>
<rSlide>
<div class="box box3"></div>
</rSlide>
</rSwiper>
</div>
</template>
<script setup>
import { rSlide, rSwiper } from 'r-swiper'
const nowIndex = ref(0) // 当前下标
const swiperDOM = ref(null) // Dom元素
/**
* 初始化加载完成反馈函数 2023-08-12 19:23:06 Ywr
*/
const funLoadEnd = () => {
console.log('loading - success');
// changePage(1, true)
}
/**
* 切换页面完成反馈函数 2023-08-12 19:23:06 Ywr
* @param {Number} i 当前下标
*/
const funTransitionend = (i) => {
nowIndex.value = i
console.log('当前下标', nowIndex.value)
}
/**
* 切换页函数 2023-08-12 19:23:06 Ywr
* @param {Number} i 下标
* @param {Boolean} st 当前下标
*/
const changePage = (i, st = false) => {
// 如果是跳转到某页
if (st) {
swiperDOM.value.slideTo(i)
}
else {
i < 0 ? (swiperDOM.value.prev()) : (swiperDOM.value.next())
}
}
</script>
<style scope lang="scss">
.home-style {
width: 100vw;
height: 100vh;
.box {
width: 100vw;
height: 100vh;
background: url('../1.png') no-repeat center center;
background-size: cover;
}
.box2 {
background-image: url('../2.png')
}
.box3 {
background-image: url('../5.png')
}
}
</style>
效果图
pc端
移动端
温馨提示
默认会显示底部指示器、 [pc端：左右两个切换按钮], 指示器和按钮都有点击切页效果
可根据props传值隐藏
具名插槽： 如果感觉 左右按钮、指示器样式不美观 或者想写入新内容 可使用以下插槽
<!-- 左右按钮 切换上下页 -->
<template #leftBtn>
...
</template>
<template #rightBtn>
...
</template>
<!-- 指示器 -->
<template #indicator>
...
</template>
<!-- 其他插槽 -->
<template #all>
...
</template>
noMove讲解
为什么会有noMove属性 [默认为：cs] 呢?
如果我想两个轮播嵌套，子轮播切换时不影响父轮播，此时，就要求子轮播在滑动时不得触发父轮播滑动
pc端：
1、滑动顶部蓝色hello world！区域，会切换整体父swiper页面,如下效果
2、滑动地球图片，只切换内部的子swiper
我们只需要给 内部的元素添加className属性 "cs" 即可
<img class="cs" src="../2.png" alt="">
注意如果觉得 cs不符合要求，可以选择更改props属性
<rSwiper :noMove="yourClassName"></rSwiper>
<!-- 此处与noMove传参保持一致 -->
<img class="yourClassName" src="../2.png" alt="">
完整代码案例
<template>
<div class="home-style">
<rSwiper class="swiper" :autoPlay="false" :indicator="false" ref="swiper" @loadEnd="funLoadEnd" @transitionend=funTransitionend :mobile="true">
<rSlide>
<div class="first-cont">
<div class="can"></div>
<!-- 注意此处 子swiper 的 noMove 属性一定不能是 cs [父swiper中的 noMove属性，否则自己的滑动事件也会被阻止] -->
<rSwiper class="child" noMove="nononononono" playTime="2000" :mobile="true" :autoplay="false">
<rSlide>
<img class="cs" src="../5.png" alt="">
</rSlide>
<rSlide>
<img class="cs" src="../7.png" alt="">
</rSlide>
<rSlide>
<img class="cs" src="../6.png" alt="">
</rSlide>
</rSwiper>
</div>
</rSlide>
<rSlide>
<img src="../1.png" alt="">
</rSlide>
<rSlide>
<img src="../1.png" alt="">
</rSlide>
</rSwiper>
</div>
</template>
<script setup>
import { rSlide, rSwiper } from 'r-swiper'
const nowIndex = ref(0) // 当前下标
const swiperDOM = ref(null) // Dom元素
/**
* 初始化加载完成反馈函数 2023-08-12 19:23:06 Ywr
*/
const funLoadEnd = () => {
console.log('loading - success');
// changePage(1, true)
}
/**
* 切换页面完成反馈函数 2023-08-12 19:23:06 Ywr
* @param {Number} i 当前下标
*/
const funTransitionend = (i) => {
nowIndex.value = i
console.log('当前下标', nowIndex.value)
}
/**
* 切换页函数 2023-08-12 19:23:06 Ywr
* @param {Number} i 下标
* @param {Boolean} st 当前下标
*/
const changePage = (i, st = false) => {
// 如果是跳转到某页
if (st) {
swiperDOM.value.slideTo(i)
}
else {
i < 0 ? (swiperDOM.value.prev()) : (swiperDOM.value.next())
}
}
</script>
<style scope lang="scss">
.home-style {
width: 100vw;
height: 100vh;
.first-cont {
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
height: 100vh;
.can {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 10vh;
background: skyblue;
}
.child {
flex: 1;
}
}
img {
width: 100vw;
height: 100vh;
}
}
</style>
移动端： 京东/淘宝/拼多多/得物等多个平台都有这种需求
滑动左侧图红框部分，整体swiper会切换
滑动右侧图红框部分，整体swiper不会切换，内部的swiper-banner会切换
亦或者，内部某些区域(如下方蓝色快列表)需要完成自己的滚动效果
完整代码如下
<template>
<div class="home-style">
<rSwiper class="swiper" :autoPlay="false" :identifier="false" ref="swiper" @loadEnd="funLoadEnd" @transitionend="funTransitionend " :mobile="true">
<rSlide>
<div class="first-cont">
<img src="../1.png" alt="">
<!-- 此处添加 noMove属性 cs -->
<div class="box cs">
<div class="can cs">
<div class="cs" v-for="i in 100" :key="i">{{i}}</div>
</div>
</div>
</div>
</rSlide>
<rSlide>
<img src="../1.png" alt="">
</rSlide>
<rSlide>
<img src="../1.png" alt="">
</rSlide>
</rSwiper>
</div>
</template>
<script setup>
import { rSlide, rSwiper } from 'r-swiper'
const nowIndex = ref(0) // 当前下标
const swiperDOM = ref(null) // Dom元素
/**
* 初始化加载完成反馈函数 2023-08-12 19:23:06 Ywr
*/
const funLoadEnd = () => {
console.log('loading - success');
// changePage(1, true)
}
/**
* 切换页面完成反馈函数 2023-08-12 19:23:06 Ywr
* @param {Number} i 当前下标
*/
const funTransitionend = (i) => {
nowIndex.value = i
console.log('当前下标', nowIndex.value)
}
/**
* 切换页函数 2023-08-12 19:23:06 Ywr
* @param {Number} i 下标
* @param {Boolean} st 当前下标
*/
const changePage = (i, st = false) => {
// 如果是跳转到某页
if (st) {
swiperDOM.value.slideTo(i)
}
else {
i < 0 ? (swiperDOM.value.prev()) : (swiperDOM.value.next())
}
}
</script>
<style scope lang="scss">
.home-style {
width: 100vw;
height: 100vh;
.first-cont {
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
height: 100vh;
.box {
width: 100%;
height: 20vh;
overflow-x: scroll;
.can {
display: flex;
justify-content: flex-start;
align-items: center;
height: 20vh;
div {
background: skyblue;
border: 1px solid #fff;
width: 100px;
padding: 80px;
margin: 10px;
}
}
}
img {
height: 80vh;
}
.child {
flex: 1;
}
}
img {
width: 100vw;
height: 100vh;
}
}
</style>
上面这几种情况都可以使用当前swiper解决。
fast 丝滑模式
大家可以试一下swiper官网 以及京东、淘宝，得物的轮播页面，快速滑动时，会有不连贯的感觉 因为在轮播组件内部，会有一个时间段的保护机制，在此时间段内需要等待轮播事件完成的动态效果，此时如果强制滑动会有异常 而本文插件的 fast模式，只需要设置swiper的 fast即刻开启丝滑模式
<rSwiper fast></swiper>
此时就可以实现快速滑动, 切换的时间只取决于你的手速, 纵享丝滑
这就是本期的全部内容了，谢谢大家的阅读。
感谢
感谢各swiper开源开发者 特别感谢linfeng大佬[github.com/helicopters…]
联系作者
Email: zywr012345@gmail.com
WeChat: ywr_98