51工具盒子# 前言 {#前言}
轮播组件是在移动端很常用的一种组件，而swiper (opens new window)、vue-awesome-swiper (opens new window)（123KB）组件基本是大家的首选。鉴于现在对移动端性能的要求越来越高，而这两个组件功能较全、体积较大，很多功能可能根本用不到，故封装了 只适用于移动端、只支持水平方向滑动（可扩展支持垂直方向） 的 OcSwiper 组件，本组件源码大小15KB，打包后大小约10KB，gzip后大小约4KB。
# Swiper轮播实现功能 {#swiper轮播实现功能}
轮播组件，支持循环、分页、自动轮播等（目前仅支持水平方向轮播）。
# 演示 {#演示}
提示
触摸滑动只支持在移动端设备进行演示，如需在PC端使用，可自行修改组件源码，将移动端touch事件替换为mouse事件。
1
2
3
4
更新数据 增加一条数据 滚动到第3个 停止自动播放 3S自动播放 关闭循环 最小滑动距离50%切换 开启自定义分页 隐藏分页
# 安装 {#安装}
# 全局引入 {#全局引入}
import { OcSwiper } from 'OcSwiper'
Vue.use(OcSwiper)
# 按需引入 {#按需引入}
import { OcSwiper } from 'OcSwiper'
export default {
components: {
OcSwiper,
}
}
# 基础用法 {#基础用法}
<oc-swiper ref="swiper"
:pagination="true"
:autoplayTime="3000"
:loop="true"
minMoveDistance="20%"
@slideChangeTransitionStart="slideChangeTransitionStart"
@slideChangeTransitionEnd="slideChangeTransitionEnd"
@onTouchStart="onTouchStart"
@onTouchStart="onTouchStart"
@onTouchEnd="onTouchEnd"
v-model="index">
<div class="oc-swiper-item" v-for="(item, idx) in list" :key="idx" @click="slideClick(item, idx)">
<div class="slide-item">{{ item }}</div>
</div>
<!-- 自定义分页展示：slot="pagination" -->
<!-- 样式一：1 2 3 4 -->
<div slot="pagination">
<ul>
<li v-for="page in list.length" :key="page" :class="{'cur-page': index === (page - 1)}">
{{ page }}
</li>
</ul>
</div>
<!-- 样式二：1/4 -->
<div slot="pagination">
<div>{{ index + 1 }} / {{ list.length }}</div>
</div>
</oc-swiper>
# 方法 {#方法}
# mySwiper.reset() 重置swiper组件。常用于window.onresize和swiper数据异步更新，如： {#myswiper-reset-重置swiper组件。常用于window-onresize和swiper数据异步更新-如}
// 窗口大小改变
window.onresize = () => {
this.$refs.swiper.reset()
}
// 列表数据更新
this.list = ['a', 'b', 'c', 'd']
this.$nextTick(() => {
// 接口异步获取到列表数据后，重置swiper组件
this.$refs.swiper.reset()
})
# 配置参数 {#配置参数}
| 参数 | 说明 | 类型 | 默认值 | 说明 | |------------------|-----------------|---------|------|---------------------------------------------| | v-model | 绑定值 | Number | 0 | 当前slide索引，从0开始 | | pagination | 是否显示分页器 | Boolean | true | 默认显示分页器 | | autoplayTime | 自动轮播时间间隔 | Number | 2500 | 0-不开启自动轮播，>0开启自动轮播，数值表示时间间隔 | | loop | 是否循环 | Boolean | true | 默认开启循环 | | minMoveDistance | 最小滑动距离 | String | 20% | 成功触发切换 item 的最小滑动距离。支持格式: 20(20px)/20px/20% | | quickTouchTime | 快速滑动 | Number | 150 | 单位（ms）。快速滑动时，只要距离大于 10px 便可以触发滑动 | | speed | 切换动画时间 | Number | 300 | 单位（ms） | | isPreventDefault | 是否在滑动时禁用浏览器默认行为 | Boolean | true | 默认禁用。 |
# 模版调用的回调方法 {#模版调用的回调方法}
| 方法名 | 说明 | 回调参数 | 备注 |
|----------------------------|--------------------------------|-----------------------------------------------------------------------------------------|----|
| slideChangeTransitionStart | swiper从当前slide开始过渡到另一个slide时执行 | realIndex，切换后slide索引 | |
| slideChangeTransitionEnd | swiper从一个slide过渡到另一个slide结束时执行 | realIndex，切换后slide索引 | |
| onTouchStart | touchStart，碰触到组件时执行 | - | |
| onTouchMove | touchMove | (event, direction) event：可用于禁用浏览器默认操作。 direction：方向（horizontal：水平方向 vertical：垂直方向）。 | |
| onTouchEnd | touchEnd，触摸释放时执行 | - | |
# 模版插槽 {#模版插槽}
| 名字 | 说明 |
|------------|------------------------------------------------------------------------------|
| 默认插槽 | swiper组件内容展示。格式： <div class="oc-swiper-item"><div>swiper slide</div></div> |
| pagination | 自定义分页样式展示 |
# 源码 {#源码}
点击查看 OcSwiper.vue 组件源码
<template>
<div
class="oc-swiper"
@touchstart="handleTouchstart"
@touchmove="handleTouchmove"
@touchend="handleTouchend"
@touchcancel="handleTouchend"
>
<div ref="wrapper" class="oc-swiper-wrapper">
<slot></slot>
</div>
<div v-if="pagination" class="oc-swiper-pagination">
<!-- 自定义分页器展示 -->
<slot name="pagination">
<div class="oc-swiper-pagination-bar">
<i
v-for="item in length"
:key="item"
:class="[
'oc-swiper-pagination-item',
item - 1 === realIndex ? 'active' : '',
]"
></i>
</div>
</slot>
</div>
</div>
</template>
<script>
export default {
name: "OcSwiper",
props: {
value: {
// 默认展示第N个，N从0开始
type: Number,
default: 0,
},
pagination: {
// 默认分页导航器
type: Boolean,
default: true,
},
autoplayTime: {
// 自动轮播时间间隔
type: Number,
default: 2500,
},
loop: {
// 循环滑动
type: Boolean,
default: true,
},
minMoveDistance: {
// 成功触发切换 item 的最小滑动距离。支持格式: 20(20px)/20px/20%
type: String,
default: "20%",
},
quickTouchTime: {
// 快速滑动时只要距离大于 10px 便可以触发滑动
type: Number,
default: 150,
},
speed: {
// 切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。
type: Number,
default: 300,
},
isPreventDefault: {
// 是否在滑动时禁用浏览器默认行为。默认为true表示禁用
type: Boolean,
default: true,
},
},
data() {
return {
width: 0, // 组件宽度
hasMounted: false,
realIndex: this.value, // 当前活动块的索引，从0开始
isRealIndexChange: false, // 滑动后当前活动块的索引是否改变
pages: [], // swiperSlide dom list
length: 0,
touchStartTime: 0, // 滑动开始时间
startx: 0, // 滑动开始位置X
starty: 0, // 滑动开始位置Y
moveDistance: 0, // 滑动距离
animating: false, // 组件正在过渡（自由滑动）
isTouching: true, // 用户正在操作（touch事件未结束）
horizontalMove: true,
copyNum: 1, // 复制数量
autoplayTimer: null,
};
},
computed: {
ocMinMoveDistance() {
let value = this.minMoveDistance;
let mode = "";
if (/px$/.test(value)) {
mode = "pixel";
} else if (/^\d+$/.test(value)) {
mode = "pixel";
} else if (/%$/.test(value)) {
mode = "percent";
} else {
value = "20%";
mode = "percent";
}
const stgy = {
pixel() {
const parsedValue = parseInt(value, 10);
return `${value}px`;
},
percent() {
const parsedValue = parseInt(value, 10) / 100;
return this.width * parsedValue;
},
};
return stgy[mode].apply(this);
},
// 滑动结束后 translatex 的值
ocTranslatex() {
return -this.width * this.realIndex;
},
ocIsEnd() {
return this.realIndex === this.length - 1;
},
ocIsBegin() {
return this.realIndex === 0;
},
},
watch: {
realIndex(val) {
if (val !== this.value) {
this.$emit("input", val);
}
this.valueChangeHandler(val);
},
value(val) {
const realIndex = this.realIndex;
const length = this.pages.length;
if (val >= length) {
val = realIndex;
this.$emit("input", val);
}
this.realIndex = val;
},
autoplayTime() {
this.autoChange();
},
},
mounted() {
this.hasMounted = true;
this.init();
this.initOnce();
},
destroyed() {
this.autoplayTimer && clearTimeout(this.autoplayTimer);
},
methods: {
reset() {
this.init();
this.initOnce();
},
init() {
// 如果组件 mounted 前 init 方法被调用，则会引起报错。
// 因此使用 hasMounted 变量来保证不会报错。
if (!this.hasMounted) return;
// 设置部分 datas 的值
const success = this.initDatas();
if (!success) {
// Failed to init datas
return;
}
// 为 wrapper 定宽
this.$refs.wrapper.style.width = `${this.width}px`;
// 复制首尾 dom
this.clearCopies();
this.addCopies();
// 自动轮播
if (this.autoplayTime > 0) {
this.autoChange();
}
},
initOnce() {
this.setTranslate(this.ocTranslatex);
},
initDatas() {
const style = getComputedStyle(this.$el, false).width;
this.width = parseInt(style, 10);
if (!this.$slots.default) {
// console.warn('No child nodes in swipe component', this.$el);
return false;
}
this.pages = this.$slots.default
.filter(
(vnode) => vnode.tag && vnode.elm.classList.contains("oc-swiper-item")
)
.map((vnode) => vnode.elm);
if (!this.pages.length) {
// console.warn('The swipe component not contained swipe-item component', this.$el);
return false;
}
this.length = this.pages.length;
return true;
},
// 清除复制的首尾dom
clearCopies() {
const children = this.$refs.wrapper.querySelectorAll(
".oc-swiper-item-copy"
);
[...children].forEach((el) => {
this.$refs.wrapper.removeChild(el);
}, this);
this.$refs.wrapper.style.marginLeft = "0";
},
// 复制首尾dom
addCopies() {
// if(!this.loop) return
const fronts = [];
const ends = [];
const pages = this.pages;
// 只有一个或不需要循环时时不复制
if (!this.loop || pages.length < 2) return;
// copy 第一个和最后一个元素
pages.forEach((item, index) => {
if (index === 0) {
const copy = item.cloneNode(true);
copy.classList.remove("oc-swiper-item");
copy.classList.add("oc-swiper-item-copy");
fronts.push(copy);
}
if (index === pages.length - 1) {
const copy = item.cloneNode(true);
copy.classList.remove("oc-swiper-item");
copy.classList.add("oc-swiper-item-copy");
ends.push(copy);
}
}, this);
this.copyNum = ends.length;
// insert node
while (ends.length) {
const item = ends.shift();
const firstNode = this.$refs.wrapper.querySelector(".oc-swiper-item");
this.$refs.wrapper.insertBefore(item, firstNode);
}
while (fronts.length) {
const item = fronts.shift();
this.$refs.wrapper.appendChild(item);
}
this.$refs.wrapper.style.marginLeft = `-${this.width * this.copyNum}px`;
},
handleTouchstart(e) {
this.$emit("onTouchStart");
if (this.length <= 1 || this.animating) return;
this.startx = e.touches[0].pageX;
this.starty = e.touches[0].pageY;
this.touchStartTime = new Date().getTime();
// 滑动开始时，清除自动轮播的计时器
this.autoplayTimer && clearTimeout(this.autoplayTimer);
// if (this.autoChange) {
// this.autoChange(); // 重置自动轮播的计时器
// }
this.isTouching = true;
},
handleTouchmove(e) {
// if (this.length <= 1 || this.animating) return;
if (this.length <= 1) return;
if (this.animating) {
e.preventDefault();
return;
}
if (this.isPreventDefault) {
e.preventDefault();
}
let moveDistance = e.touches[0].pageX - this.startx;
this.moveDistance = moveDistance;
// 判断用户是横向滑动还是纵向滑动，以此来避免误滑
if (this.isTouching) {
this.isTouching = false;
const moveY = e.touches[0].pageY - this.starty;
this.horizontalMove = Math.abs(moveDistance) >= Math.abs(moveY);
}
// 用户非水平滑动屏幕
if (!this.horizontalMove) {
this.$emit("onTouchMove", e, "vertical");
return;
}
this.$emit("onTouchMove", e, "horizontal");
const translate = this.ocTranslatex + moveDistance;
// 正常触摸应该移动的距离
let finalTranslate = translate;
// 考虑 loop 的取值时
if (!this.loop) {
const leftBoundary = 0;
const rightBoundary = -this.width * (this.length - 1);
if (translate > leftBoundary) {
// 左边界
finalTranslate = leftBoundary;
} else if (translate < rightBoundary) {
// 右边界
finalTranslate = rightBoundary;
}
}
this.setTranslate(finalTranslate);
},
handleTouchend(e) {
this.$emit("onTouchEnd");
if (this.length <= 1 || this.animating) return;
if (!this.horizontalMove) return;
const isQuick =
new Date().getTime() - this.touchStartTime < this.quickTouchTime;
if (this.loop) {
// 如果是 loop 的话，有很多地方需要特殊处理
this.handleTouchend_loop(this.cartChange(this.moveDistance, isQuick));
} else {
// 根据轮播图滑动的方向来改变 realIndex
this.updateInsideValue(this.cartChange(this.moveDistance, isQuick));
}
// reset some data
this.moveDistance = 0;
// 滑动结束，开启自动轮播
this.autoChange();
},
// 考虑 this.loop 的取值对 translate 的影响
handleTouchend_loop(deviation) {
if (!this.loop) return;
const newValue = this.realIndex + deviation;
// left boundary
if (this.realIndex === 0 && newValue < this.realIndex) {
this.setTranslate(-this.width * this.length + this.moveDistance);
setTimeout(() => {
this.updateInsideValue(deviation);
}, 40);
return;
}
// right boundary
if (this.realIndex === this.length - 1 && newValue > this.realIndex) {
this.setTranslate(this.width + this.moveDistance);
setTimeout(() => {
this.updateInsideValue(deviation);
}, 40);
return;
}
this.updateInsideValue(deviation);
},
/**
* 根据传入的差值来正确的更新 realIndex
* @param {number} deviation value 改变的差值
*/
updateInsideValue(deviation) {
// 因为滑动后如果没有翻页成功，是无法改变 realIndex 的值的，所以需要手动触发 handler
if (deviation === 0) {
this.isRealIndexChange = false;
this.valueChangeHandler(deviation);
return;
}
// 新的 insidevalue 值应该是现在 realIndex 的值 和 改变的差值的和
const newValue = this.realIndex + deviation;
this.isRealIndexChange = true;
// 按顺序查看是否满足处理数据的要求，如果不满足则交给下一个函数处理
const chain = this.chain(
// 是否是 loop
this.updateInsideValue_loop,
// 什么特殊的设置都没有
this.updateInsideValue_normal,
// 通过更新 realIndex 来触发 valueChangeHandler
(newValue) => {
this.realIndex = newValue;
}
);
chain(newValue);
},
// 当考虑到 loop 的情况时
updateInsideValue_loop(newValue) {
if (!this.loop) return false;
this.isRealIndexChange = true;
if (newValue < 0) {
this.realIndex = this.length - 1;
return "done";
}
if (newValue > this.length - 1) {
this.realIndex = 0;
return "done";
}
return false;
},
// 普通状态下， loop === false
updateInsideValue_normal(newValue) {
if (newValue < 0) {
this.realIndex = 0;
this.isRealIndexChange = false;
// 因为这时候 realIndex 的值其实没变，所以需要手动触发 valueChangeHandler
this.valueChangeHandler(0);
return "done";
}
if (newValue > this.length - 1) {
this.realIndex = this.length - 1;
this.isRealIndexChange = false;
// 因为这时候 realIndex 的值其实没变，所以需要手动触发 valueChangeHandler
this.valueChangeHandler(this.length - 1);
return "done";
}
this.isRealIndexChange = true;
return false;
},
cartChange(moveDistance, quick) {
const absMove = Math.abs(moveDistance);
const absMin = Math.abs(this.ocMinMoveDistance);
// 策略组
const strategies = {
// 普通滑动
normal() {
if (absMove < absMin) return 0;
if (moveDistance > 0) return -1;
if (moveDistance < 0) return 1;
return 0;
},
// 快速滑动
quick() {
if (absMove < 10) return 0;
if (moveDistance > 0) return -1;
if (moveDistance < 0) return 1;
return 0;
},
};
let stgy = "normal";
// 当前策略
switch (true) {
case quick === true:
stgy = "quick";
break;
default:
stgy = "normal";
break;
}
return strategies[stgy].apply(this);
},
valueChangeHandler(value) {
// 添加过渡效果
this.duration();
this.setTranslate(this.ocTranslatex);
},
// 自动轮播
autoChange() {
this.autoplayTimer && clearTimeout(this.autoplayTimer);
const timer = () => {
if (
typeof this.autoplayTime !== "number" ||
this.autoplayTime <= 0 ||
this.length <= 1
)
return;
this.autoplayTimer = setTimeout(() => {
this.autoChangeHandler();
timer();
}, this.autoplayTime);
};
timer();
},
autoChangeHandler() {
this.isRealIndexChange = true;
// 如果是右边界，则先移动到左边被 copy 的相同的元素
if (this.ocIsEnd) {
this.setTranslate(this.width);
}
// 如果不延迟 40 ms 的话，在 setTranslate 的时候，就会触发 transition 效果，这是不想要的。
setTimeout(() => {
this.realIndex =
this.realIndex < this.length - 1 ? this.realIndex + 1 : 0;
}, 40);
},
/**
* 惰性函数，设置 dom 的 translate 值
* @param {dom} el 进行变换的元素
* @param {number|string} trans 进行变换的值
*/
setTranslate(d) {
let transform = `translate3d(${d}px, 0, 0)`;
this.$refs.wrapper.style.webkitTransform = transform;
this.$refs.wrapper.style.transform = transform;
},
/**
* 添加和删除过渡效果
* @param {Array} args 需要添加过渡动画的元素数组
*/
duration() {
this.animating = true;
// 回调函数，swiper从当前slide开始过渡到另一个slide时执行。
if (this.isRealIndexChange) {
this.$emit("slideChangeTransitionStart", this.realIndex);
}
const el = this.$refs.wrapper;
const speed = this.speed;
el.style.webkitTransitionDuration = `${speed}ms`;
el.style.transitionDuration = `${speed}ms`;
el.style.webkitTransitionTimingFunction = "ease-out";
el.style.transitionTimingFunction = "ease-out";
// 添加过渡效果
this.durationTimer && clearTimeout(this.durationTimer);
this.durationTimer = setTimeout(() => {
el.style.transitionDuration = "";
el.style.webkitTransitionDuration = "";
this.animating = false;
// 回调函数，swiper从一个slide过渡到另一个slide结束时执行。
if (this.isRealIndexChange) {
this.$emit("slideChangeTransitionEnd", this.realIndex);
}
}, speed);
},
// 职责链，函数 return false 则终止传递
chain(...fns) {
return (...args) => {
for (let index = 0; index < fns.length; index += 1) {
const result = fns[index](...args);
if (result === "done") break;
}
};
},
},
};
</script>
<style lang="scss" scoped>
.oc-swiper {
overflow: hidden;
}
.oc-swiper-wrapper {
height: 100%;
display: flex;
flex-direction: row;
}
.oc-swiper-item,
.oc-swiper-item-copy {
width: 100%;
height: 100%;
flex: none;
}
.oc-swiper-pagination {
position: relative;
height: 0;
}
.oc-swiper-pagination-bar {
position: absolute;
left: 0;
right: 0;
top: -16px;
bottom: 0;
display: flex;
justify-content: center;
align-items: flex-start;
}
.oc-swiper-pagination-item {
display: block;
width: 4px;
height: 4px;
border-radius: 2px;
background-color: rgba(#fff, 0.6);
margin: 0 4px;
transition: all 0.1s;
&.active {
width: 8px;
background-color: #fff;
}
}
</style>
点击查看 DEMO 源码
<template>
<div class="demo-swiper-page">
<section class="demo">
<oc-swiper
ref="swiper"
:autoplayTime="autoplayTime"
:loop="loop"
:minMoveDistance="minMoveDistance"
:pagination="pagination"
:isPreventDefault="false"
@slideChangeTransitionStart="slideChangeTransitionStart"
@slideChangeTransitionEnd="slideChangeTransitionEnd"
@onTouchStart="onTouchStart"
@onTouchMove="onTouchMove"
@onTouchEnd="onTouchEnd"
v-model="index"
>
<div
class="oc-swiper-item"
v-for="(item, idx) in list"
:key="idx"
@click="slideClick(item, idx)"
>
<div class="slide-item">{{ item }}</div>
</div>
<div v-if="userPagination" class="user-pagination" slot="pagination">
<ul v-if="isPageStyle1">
<li
v-for="page in list.length"
:key="page"
:class="{ 'cur-page': index === page - 1 }"
@click="index = page - 1"
>
{{ page }}
</li>
</ul>
<div v-else class="page-2">{{ index + 1 }} / {{ list.length }}</div>
</div>
</oc-swiper>
</section>
<button class="g-btn" @click="update">更新数据</button>
<button class="g-btn" @click="add">增加一条数据</button>
<button class="g-btn" @click="index = 2">滚动到第3个</button>
<button class="g-btn" @click="autoplayTime = 0">停止自动播放</button>
<button class="g-btn" @click="autoplayTime = 3000">3S自动播放</button>
<button class="g-btn" @click="loop = !loop">
{{ loop ? "关闭" : "开启" }}循环
</button>
<button class="g-btn" @click="minMoveDistance = '50%'">
最小滑动距离50%切换
</button>
<button class="g-btn" @click="userPagination = !userPagination">
{{ userPagination ? "关闭" : "开启" }}自定义分页
</button>
<button
class="g-btn"
v-if="userPagination"
@click="isPageStyle1 = !isPageStyle1"
>
自定义分页样式切换
</button>
<button class="g-btn" @click="pagination = !pagination">
{{ pagination ? "隐藏" : "显示" }}分页
</button>
</div>
</template>
<script>
export default {
name: "DemoSwiper",
data() {
return {
index: 0,
minMoveDistance: "20%",
autoplayTime: 3000,
loop: true,
list: [1, 2, 3, 4],
pagination: true,
userPagination: false,
isPageStyle1: true,
};
},
mounted() {
window.onresize = () => {
this.$refs.swiper.reset();
};
},
methods: {
add() {
this.list.push(this.list.length + 1);
this.$nextTick(() => {
this.$refs.swiper.reset();
});
},
update() {
this.list = ["a", "b", "c", "d"];
this.$nextTick(() => {
this.$refs.swiper.reset();
});
},
onTouchStart() {
console.log("onTouchStart:");
},
onTouchMove(e, direction) {
// 禁用水平方向滑动
if (direction === "horizontal") {
e.preventDefault();
}
console.log(`onTouchMove:${direction}`);
},
onTouchEnd() {
console.log("onTouchEnd:");
},
slideClick(item, idx) {
console.log(`slideClick: index-${idx}, item-${item}`);
},
slideChangeTransitionStart(idx) {
console.log(`slideChangeTransitionStart:${idx}`);
},
slideChangeTransitionEnd(idx) {
console.log(`slideChangeTransitionEnd:${idx}`);
},
},
};
</script>
<style lang="scss">
.oc-swiper {
height: 200px;
.slide-item {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #99a9bf;
font-size: 30px;
font-weight: bold;
}
}
.user-pagination {
position: relative;
ul {
margin-top: -24px;
display: flex;
justify-content: center;
align-items: flex-start;
li {
color: #fff;
background: rgba(#000, 0.4);
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
border-radius: 50%;
display: inline-block;
margin: 0 4px;
&.cur-page {
background: #007aff;
}
}
}
.page-2 {
margin-top: -24px;
text-align: center;
color: #000;
}
}
</style>
<style lang="scss" scoped>
.demo-swiper-page {
margin: 10px;
.demo {
margin-bottom: 10px;
}
.g-btn {
margin-bottom: 10px;
}
}
</style>
