--- theme: channing-cyan --- ## r-swiper vue3版本含有禁止滑动块、快速连播模式，完美解决移动/PC端轮播需求 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8a08f12822ad43438c3601792932bfbb~tplv-k3u1fbpfcp-watermark.image#?w=2559\&h=1424\&s=5585888\&e=png\&b=6378ce) #### 这是一个vue3版本的轮播插件,移动端和pc端都已完美适配. [vue2版本文档链接](https://juejin.cn/post/7261994543570042935) 可能有小伙伴会问了，都2500年了，市面上的轮播组件数不胜数，谁还会傻到造轮播的轮子啊？啊这。。。不是说存在即合理吗原因吗，主要有两点 1、如果引入官方swiper包会不会太大了，有必要吗? 2、有其他体积小的vue3开源组件，大部分场景都能适配，也多次遇到过特殊需求，无奈只能多次更改源码 But Please: Don't Repeat Yourself! 既然如此，那我就来封装一个功能强大，动效精美的轮播组件，可以完美适配绝大部分正常的业务需求（如果这个组件还满足不了你的需求，本着忍一时越想越气,退一步越想越亏的原则，我劝你即刻去找产品对线。。。啊不，即刻联系我，看看能不能再优化一下）。此插件含有禁止滑动块模式(noMove属性) 可以在swiper轮播内部实现阻拦滑动效果丝滑模式(fast属性), 连续切换时, 没有强制限制动画时间, 切换快慢只取决于你的手速, 德芙\~纵享丝滑可嵌套使用, 目前遇到的所有bug都已更改第一次写轮播还是17年,用的jQuery, 代码已经找不到了, 这次浏览了多个swiper开源代码，综合整理，做了部分优化，如果感觉不流畅或者对此插件有修改建议请及时联系我(联系方式在最底部), 最后希望大家能够喜欢！ [演示项目案例](https://zywr012345.github.io) ### 安装依赖 1. 打开项目根目录，执行命令 ```js // 如果使用的是npm npm i r-swiper // 如果使用的是yarn yarn add r-swiper ``` ### 引入依赖安装依赖后根据自己的需求引入 * 全局引入 ```js // 10.25k 目前体积还可以接受 import Swiper from 'r-swiper' // ... 创建 app ... app.use(Swiper) ``` * 局部引入 ```vue // Options 选项式API引入 ``` #### 组件讲解 | 名称 | 介绍 | | ------- | ----------------- | | 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 为当前下标 | ### 代码案例 ```vue ``` ### 效果图 pc端 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cecc8a51eb374654a5e5deed614b303e~tplv-k3u1fbpfcp-watermark.image#?w=2559\&h=1424\&s=3182622\&e=png\&b=3f6a7d) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27b0f1170148417faa61a59cbf922a55~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2559\&h=1413\&s=5842074\&e=png\&b=d7b3dc) 移动端 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f88a55d4261e49e18bc46ca425bb6689~tplv-k3u1fbpfcp-watermark.image#?w=312\&h=552\&s=223852\&e=png\&b=436b7c) ### 温馨提示默认会显示底部指示器、 \[pc端：左右两个切换按钮], 指示器和按钮都有点击切页效果可根据props传值隐藏具名插槽：如果感觉左右按钮、指示器样式不美观或者想写入新内容可使用以下插槽 ```html ``` ### noMove讲解为什么会有noMove属性 \[默认为：cs] 呢? ##### 如果我想两个轮播嵌套，子轮播切换时不影响父轮播，此时，就要求子轮播在滑动时不得触发父轮播滑动 pc端： 1、滑动顶部蓝色hello world！区域，会切换整体父swiper页面,如下效果 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f528bff8d1244e488339e314e0e3855b~tplv-k3u1fbpfcp-watermark.image#?w=1439\&h=810\&s=1553580\&e=png\&b=456785) 2、滑动地球图片，只切换内部的子swiper ![微信图片\_20230731114908.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3e7176f886d74ebeb7f5ac470f2ec775~tplv-k3u1fbpfcp-watermark.image#?w=1439\&h=813\&s=1536080\&e=png\&b=495e82) 我们只需要给内部的元素添加className属性 "cs" 即可 ```vue

``` 注意如果觉得 cs不符合要求，可以选择更改props属性 ```vue

``` 完整代码案例 ```vue ``` 移动端：京东/淘宝/拼多多/得物等多个平台都有这种需求滑动左侧图红框部分，整体swiper会切换滑动右侧图红框部分，整体swiper不会切换，内部的swiper-banner会切换 ![1690784740829.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31474ec1b4774488bf0345c5df7cfb45~tplv-k3u1fbpfcp-watermark.image#?w=467\&h=479\&s=265170\&e=png\&b=f9f7f7) 亦或者，内部某些区域(如下方蓝色快列表)需要完成自己的滚动效果 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/86f818a0e6bd4e588efb49c9e791539d~tplv-k3u1fbpfcp-watermark.image#?w=1442\&h=813\&s=1286288\&e=png\&b=3e7288) 完整代码如下 ```vue ``` 上面这几种情况都可以使用当前swiper解决。 #### fast 丝滑模式大家可以试一下swiper官网以及京东、淘宝，得物的轮播页面，快速滑动时，会有不连贯的感觉因为在轮播组件内部，会有一个时间段的保护机制，在此时间段内需要等待轮播事件完成的动态效果，此时如果强制滑动会有异常而本文插件的 fast模式，只需要设置swiper的 fast即刻开启丝滑模式 ```vue ``` 此时就可以实现快速滑动, 切换的时间只取决于你的手速, 纵享丝滑 #### 这就是本期的全部内容了，谢谢大家的阅读。 #### 感谢感谢各swiper开源开发者特别感谢linfeng大佬\[] #### 联系作者 Email: