hello-swiper
v1.0.1
Published
The vue3.0 version of the swiper plug-in, both mobile and PC have been adapted
Downloads
1
Readme
theme: channing-cyan
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.14k 目前体积还可以接受 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大佬[https://github.com/helicopters?tab=repositories]
联系作者
Email: [email protected]
WeChat: ywr_98