| r | 您所在的位置：网站首页 › 淘宝搜图插件有哪些 › r |
r
|
r-swiper vue3版本 含有禁止滑动块、快速连播模式，完美解决移动/PC端轮播需求
vue2版本文档链接 可能有小伙伴会问了，都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)局部引入 // Composition 组合式API引入 import {rSwiper, rSlide} from 'r-swiper' // Options 选项式API引入 import {rSwiper, rSlide} from 'r-swiper' export default { components: { 'rSwiper': rSwiper, 'rSlide': rSlide } } 组件讲解 名称介绍rSwiper外部组件，各种事件动效都在此内完成rSlide内部组件，包裹各个轮播页面内容 props参数 (一律使用小驼峰命名) 名称默认值类型介绍fastfalseBoolean是否为快速滑动，纵享丝滑模式autoPlayfalseBoolean是否自动轮播播放playTime5000Number,Sting自动播放切换时间speed500Number, String切换页面后的动画过渡时间therehold100Number滑动多少距离后触发切页函数slide0Number初始默认下标indicatortrueBoolean指示器显示? 底部居中闪烁点/条状indicatorFlashtrueBoolean指示器闪烁动效noMovecsString非滑动模式 className(一会重点讲)mobilefalseBoolean是否为移动端(移动端会隐藏 左右切页按钮)vLockfalseBoolean垂直方向是否可滚动 methos事件 类型名称介绍ref事件refDom.prev()切换到上一页/refDom.next()切换到下一页/refDom.slideTo(i)切换到指定下标(i)页emit事件@loadEnd初次渲染完成后反馈函数/@transitionend(i)切换页面后反馈函数, i 为当前下标 代码案例 import { rSlide, rSwiper } from 'r-swiper' const nowIndex = ref(0) // 当前下标 const swiperDOM = ref(null) // Dom元素 /** * 2023-12-18 08:52:05 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()) } } .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') } } 效果图pc端 移动端
默认会显示底部指示器、 [pc端：左右两个切换按钮], 指示器和按钮都有点击切页效果 可根据props传值隐藏 具名插槽： 如果感觉 左右按钮、指示器样式不美观 或者想写入新内容 可使用以下插槽 ... ... ... ... noMove讲解为什么会有noMove属性 [默认为：cs] 呢? 如果我想两个轮播嵌套，子轮播切换时不影响父轮播，此时，就要求子轮播在滑动时不得触发父轮播滑动pc端： 1、滑动顶部蓝色hello world！区域，会切换整体父swiper页面,如下效果 2、滑动地球图片，只切换内部的子swiper 我们只需要给 内部的元素添加className属性 "cs" 即可 
注意如果觉得 cs不符合要求，可以选择更改props属性
完整代码案例 
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())
}
}
.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;
}
}
移动端： 京东/淘宝/拼多多/得物等多个平台都有这种需求 滑动左侧图红框部分，整体swiper会切换 滑动右侧图红框部分，整体swiper不会切换，内部的swiper-banner会切换 亦或者，内部某些区域(如下方蓝色快列表)需要完成自己的滚动效果 完整代码如下
{{i}}
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())
}
}
.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;
}
}
上面这几种情况都可以使用当前swiper解决。 fast 丝滑模式大家可以试一下swiper官网 以及京东、淘宝，得物的轮播页面，快速滑动时，会有不连贯的感觉 因为在轮播组件内部，会有一个时间段的保护机制，在此时间段内需要等待轮播事件完成的动态效果，此时如果强制滑动会有异常 而本文插件的 fast模式，只需要设置swiper的 fast即刻开启丝滑模式 此时就可以实现快速滑动, 切换的时间只取决于你的手速, 纵享丝滑 这就是本期的全部内容了，谢谢大家的阅读。 感谢感谢各swiper开源开发者 特别感谢linfeng大佬[github.com/helicopters…] 联系作者Email: [email protected] WeChat: ywr_98 |
【本文地址】