732 lines
22 KiB
Vue
732 lines
22 KiB
Vue
<template>
|
||
<view :id="'swiper'+_uid"
|
||
:class="['swiper',contentClass,containerClasses,options.direction === 'vertical'?'swiper-vertical':'']"
|
||
:style="[customStyle]">
|
||
<!-- #ifndef MP-WEIXIN || MP-QQ -->
|
||
<view :class="['swiper-wrapper']" :style="[wrapperStyle]" @click="onClickWrapper" @touchstart="onTouchStart"
|
||
@touchmove="onTouchMove" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN || MP-QQ -->
|
||
<view :class="['swiper-wrapper']" :style="[wrapperStyle]" @click="onClickWrapper"
|
||
@touchstart="zSwiperWxs.onTouchStartWxs" @touchmove="zSwiperWxs.onTouchMoveWxs"
|
||
@touchend="zSwiperWxs.onTouchEndWxs" @touchcancel="zSwiperWxs.onTouchEndWxs"
|
||
:swiperTransform="wxsTransform" :change:swiperTransform="zSwiperWxs.wxsTransformObserver">
|
||
<!-- #endif -->
|
||
<slot></slot>
|
||
<!-- 在loop模式下，为group填充空白slide -->
|
||
<template v-if="loopBlankShow">
|
||
<z-swiper-item v-for="(item,index) in loopBlankNumber" :key="index">
|
||
</z-swiper-item>
|
||
</template>
|
||
<template v-if="cubeShadowShowWrapper">
|
||
<view class="swiper-cube-shadow" :style="[cubeShadowStyle]"></view>
|
||
</template>
|
||
</view>
|
||
<template v-if="cubeShadowShowRoot">
|
||
<view class="swiper-cube-shadow" :style="[cubeShadowStyle]"></view>
|
||
</template>
|
||
<slot name="indicator"></slot>
|
||
<template v-if="showIndicators">
|
||
<view :class="['swiper-pagination',paginationClass]" :style="[paginationStyle]">
|
||
<template v-if="paginationType == 'bullets'">
|
||
<view v-for="(item,index) in paginationContent" :key="index"
|
||
:class="[item.classContent.join(' ')]" :style="[item.styleContent]"
|
||
@click="paginationItemClick(index)">
|
||
</view>
|
||
</template>
|
||
<template v-if="paginationType == 'fraction'">
|
||
<text :class="paginationContent.currentClass">{{paginationContent.text}}</text>/<text
|
||
:class="paginationContent.totalClass">{{paginationContent.total}}</text>
|
||
</template>
|
||
<template v-if="paginationType == 'progressbar'">
|
||
<text :class="paginationContent.progressbarFillClass"
|
||
:style="[paginationContent.styleContent]"></text>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
<template v-if="(showPrevButton||showPrevButtonSlot)">
|
||
<view :class="['swiper-button-prev',prevClass]" @click="prevClick">
|
||
<view v-if="!showPrevButtonSlot" class="zebra-icon zebra-icon-circle_chevron_left"></view>
|
||
<slot v-else name="pre-button"></slot>
|
||
</view>
|
||
</template>
|
||
<template v-if="(showNextButton||showNextButtonSlot)">
|
||
<view :class="['swiper-button-next',nextClass]" @click="nextClick">
|
||
<view v-if="!showNextButtonSlot" class="zebra-icon zebra-icon-circle_chevron_right"></view>
|
||
<slot v-else name="next-button"></slot>
|
||
</view>
|
||
</template>
|
||
<template v-if="scrollbarShow">
|
||
<view :class="['swiper-scrollbar',scrollbarClass]" :style="[scrollbarStyle]"
|
||
@click.stop="onClickScrollbar" @touchstart.stop="onTouchStartScrollbar"
|
||
@touchmove.stop.prevent="onTouchMoveScrollbar" @touchend.stop="onTouchEndScrollbar">
|
||
<view class="swiper-scrollbar-drag" :style="[scrollbarItemStyle]">
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
<!-- #ifdef MP-WEIXIN || MP-QQ -->
|
||
<script src="../../wxs/z-swiper-wxs.wxs" module="zSwiperWxs" lang="wxs"></script>
|
||
<!-- #endif -->
|
||
<script>
|
||
import {
|
||
getAllRect,
|
||
getRect
|
||
} from '../../libs/utils/utils.js';
|
||
// vue2
|
||
import {
|
||
getParams
|
||
} from '../../libs/vue2/get-params.js';
|
||
import {
|
||
initSwiper,
|
||
mountSwiper
|
||
} from '../../libs/vue2/init-swiper.js';
|
||
import {
|
||
needsScrollbar,
|
||
needsNavigation,
|
||
needsPagination,
|
||
uniqueClasses,
|
||
extend,
|
||
} from '../../libs/vue2/utils.js';
|
||
import {
|
||
renderLoop,
|
||
calcLoopedSlides
|
||
} from '../../libs/vue2/loop.js';
|
||
import {
|
||
getChangedParams
|
||
} from '../../libs/vue2/get-changed-params.js';
|
||
import {
|
||
updateSwiper
|
||
} from '../../libs/vue2/update-swiper.js';
|
||
import {
|
||
renderVirtual,
|
||
updateOnVirtualData
|
||
} from '../../libs/vue2/virtual.js';
|
||
//mixin
|
||
import {
|
||
ParentMixin
|
||
} from '../../libs/mixins/relation.js';
|
||
|
||
export default {
|
||
name: "z-swipe",
|
||
// #ifdef MP-WEIXIN
|
||
options: {
|
||
virtualHost: true
|
||
},
|
||
// #endif
|
||
mixins: [
|
||
ParentMixin('zSwipe')
|
||
],
|
||
// #ifdef VUE3
|
||
emits: ['update:modelValue', 'touch-start', 'touch-move', 'touch-end', 'transitionend', 'slideClick',
|
||
'_beforeBreakpoint',
|
||
'_containerClasses',
|
||
'_slideClass',
|
||
'_slideClasses', '_swiper',
|
||
'activeIndexChange', 'afterInit', 'autoplay', 'autoplayStart', 'autoplayStop', 'autoplayPause',
|
||
'autoplayResume', 'beforeDestroy', 'beforeInit', 'beforeLoopFix', 'beforeResize', 'beforeSlideChangeStart',
|
||
'beforeTransitionStart', 'breakpoint', 'changeDirection', 'click', 'disable', 'doubleTap', 'doubleClick',
|
||
'destroy', 'enable', 'fromEdge', 'hashChange', 'hashSet', 'imagesReady', 'init', 'keyPress',
|
||
'lazyImageLoad', 'lazyImageReady', 'lock', 'loopFix', 'momentumBounce', 'navigationHide', 'navigationShow',
|
||
'observerUpdate', 'orientationchange', 'paginationHide', 'paginationRender', 'paginationShow',
|
||
'paginationUpdate', 'progress', 'reachBeginning', 'reachEnd', 'realIndexChange', 'resize', 'scroll',
|
||
'scrollbarDragEnd', 'scrollbarDragMove', 'scrollbarDragStart', 'setTransition', 'setTranslate',
|
||
'slideChange', 'slideChangeTransitionEnd', 'slideChangeTransitionStart', 'slideNextTransitionEnd',
|
||
'slideNextTransitionStart', 'slidePrevTransitionEnd', 'slidePrevTransitionStart',
|
||
'slideResetTransitionStart', 'slideResetTransitionEnd', 'sliderMove', 'sliderFirstMove',
|
||
'slidesLengthChange', 'slidesGridLengthChange', 'snapGridLengthChange', 'snapIndexChange', 'swiper', 'tap',
|
||
'toEdge', 'touchEnd', 'touchMove', 'touchMoveOpposite', 'touchStart', 'transitionEnd', 'transitionStart',
|
||
'unlock', 'update', 'zoomChange', 'beforeMount', 'nextClick', 'prevClick', 'touchStartScrollbar',
|
||
'touchMoveScrollbar', 'touchEndScrollbar', 'beforeUpdate', 'paginationItemClick'
|
||
],
|
||
// #endif
|
||
props: {
|
||
customStyle: {
|
||
type: Object,
|
||
default: () => {
|
||
return {};
|
||
}
|
||
},
|
||
options: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
// #ifdef VUE2
|
||
value: {
|
||
type: Array,
|
||
default: () => {
|
||
return []
|
||
}
|
||
},
|
||
// #endif
|
||
// #ifdef VUE3
|
||
modelValue: {
|
||
type: Array,
|
||
default: () => {
|
||
return []
|
||
}
|
||
}
|
||
// #endif
|
||
},
|
||
data() {
|
||
return {
|
||
wxsTransform: "",
|
||
wrapperStyle: {},
|
||
contentClass: '',
|
||
nextElClass: [],
|
||
prevElClass: [],
|
||
paginationElClass: [],
|
||
paginationItemElClass: [],
|
||
loopBlankShow: false,
|
||
loopBlankNumber: 0,
|
||
cubeShadowShowWrapper: false,
|
||
cubeShadowShowRoot: false,
|
||
cubeShadowStyle: {},
|
||
eventsListeners: {},
|
||
showPrevButton: false,
|
||
showPrevButtonSlot: false,
|
||
showNextButton: false,
|
||
showNextButtonSlot: false,
|
||
showIndicators: false,
|
||
paginationContent: [],
|
||
paginationType: '',
|
||
paginationStyle: {},
|
||
scrollbarElClass: [],
|
||
scrollbarStyle: {},
|
||
scrollbarItemStyle: {},
|
||
rectInfo: null,
|
||
|
||
// vue2
|
||
containerClasses: 'swiper',
|
||
virtualData: null,
|
||
firstLoad: true,
|
||
originalDataList: [],
|
||
loopUpdateData: false
|
||
};
|
||
},
|
||
computed: {
|
||
// #ifdef VUE3
|
||
value() {
|
||
return this.modelValue
|
||
},
|
||
// #endif
|
||
// #ifdef VUE3
|
||
_uid() {
|
||
return this._.uid
|
||
},
|
||
// #endif
|
||
nextClass() {
|
||
return this.nextElClass.join(" ");
|
||
},
|
||
prevClass() {
|
||
return this.prevElClass.join(" ");
|
||
},
|
||
paginationClass() {
|
||
return this.paginationElClass.join(" ");
|
||
},
|
||
paginationItemClass() {
|
||
return this.paginationItemElClass.join(" ");
|
||
},
|
||
scrollbarClass() {
|
||
return this.scrollbarElClass.join(" ");
|
||
},
|
||
scrollbarShow() {
|
||
return needsScrollbar(this.options)
|
||
}
|
||
},
|
||
created() {
|
||
const {
|
||
params: swiperParams,
|
||
passedParams
|
||
} = getParams(this.options);
|
||
this.swiperElRef = 'swiper';
|
||
this.swiperParams = swiperParams;
|
||
this.oldPassedParamsRef = passedParams;
|
||
let slidesRef = this.slidesRef;
|
||
|
||
swiperParams.onAny = (event, ...args) => {
|
||
// #ifdef MP
|
||
// 字节小程序此处报错，因此无法使用v-on监听事件
|
||
// #ifndef MP-TOUTIAO
|
||
this.$emit(event, {}, ...args.filter((item, index) => {
|
||
return index > 0
|
||
}));
|
||
// #endif
|
||
// #endif
|
||
// #ifndef MP
|
||
this.$emit(event, ...args);
|
||
// #endif
|
||
};
|
||
Object.assign(swiperParams.on, {
|
||
_containerClasses(swiper, classes) {
|
||
this.containerClasses = classes;
|
||
},
|
||
});
|
||
this.$watch(() => {
|
||
return {
|
||
value: this.value,
|
||
options: this.options
|
||
}
|
||
}, (val) => {
|
||
// virtual模式处理
|
||
if (this.swiperParams && this.swiperParams.virtual) {
|
||
if (!this.virtualData && val.options.virtual.slides.length) {
|
||
this.swiperParams.virtual.slides = val.options.virtual.slides;
|
||
const extendWith = {
|
||
cache: false,
|
||
slides: val.options.virtual.slides,
|
||
renderExternal: data => {
|
||
this.virtualData = data;
|
||
// #ifdef VUE2
|
||
this.$emit("input", data.slides);
|
||
// #endif
|
||
// #ifdef VUE3
|
||
this.$emit("update:modelValue", data.slides);
|
||
// #endif
|
||
},
|
||
renderExternalUpdate: false
|
||
};
|
||
extend(this.swiperParams.virtual, extendWith);
|
||
this.loadSwiper();
|
||
}
|
||
}
|
||
// loop模式处理
|
||
if (this.swiperParams && this.swiperParams.loop) {
|
||
if (this.originalDataList.length && (this.originalDataList.toString() == val.value
|
||
.toString())) {
|
||
this.loopUpdateData = true;
|
||
// 百度小程序watch晚于子组件加载
|
||
// #ifdef MP-BAIDU
|
||
if (this.firstLoad) {
|
||
this.loadSwiper();
|
||
}
|
||
// #endif
|
||
} else {
|
||
this.loopUpdateData = false;
|
||
let slides = renderLoop(this, this.swiperParams, this.value);
|
||
if (this.swiperParams.loop && !this.loopUpdateData && slides.data.toString() !=
|
||
val.value.toString()) {
|
||
this.loopUpdateData = true;
|
||
// #ifdef VUE2
|
||
this.$emit("input", slides.data)
|
||
// #endif
|
||
// #ifdef VUE3
|
||
this.$emit("update:modelValue", slides.data)
|
||
// #endif
|
||
return
|
||
}
|
||
}
|
||
}
|
||
if (this.swiper && !this.firstLoad) {
|
||
if (this.virtualData && val.options.virtual.type == "cut") {
|
||
const style = this.swiper.isHorizontal() ? {
|
||
[this.swiper.rtlTranslate ? 'right' :
|
||
'left'
|
||
]: `${this.virtualData.offset}px`
|
||
} : {
|
||
top: `${this.virtualData.offset}px`
|
||
};
|
||
this.children
|
||
.map(slide => {
|
||
slide.css(style)
|
||
});
|
||
|
||
}
|
||
|
||
|
||
this.updateSwiper(val.value, val.options, this.children);
|
||
}
|
||
}, {
|
||
deep: true,
|
||
immediate: true
|
||
})
|
||
this.$watch(() => {
|
||
return this.$data
|
||
}, (val) => {
|
||
if (this.swiper && this.swiper.native) {
|
||
Object.assign(this.swiper.native, {
|
||
val
|
||
});
|
||
}
|
||
}, {
|
||
deep: true
|
||
})
|
||
this.$watch(() => {
|
||
return this.virtualData
|
||
}, (val) => {
|
||
if (this.swiper && this.virtualData) {
|
||
updateOnVirtualData(this.swiper);
|
||
}
|
||
}, {
|
||
deep: true
|
||
})
|
||
uni.$on("childrenReady" + this._uid, async (children) => {
|
||
children.dataSwiperSlideIndex = children.index;
|
||
if (this.children.length == this.value.length) {
|
||
Promise.all(this.children.map((item) => {
|
||
return item.getSize();
|
||
})).then((res) => {
|
||
if (this.swiperParams && this.swiperParams.loop) {
|
||
if (this.originalDataList.length && (this.originalDataList
|
||
.toString() == this.value
|
||
.toString())) {
|
||
if (this.firstLoad) {
|
||
this.loadSwiper();
|
||
}
|
||
} else {
|
||
return
|
||
}
|
||
} else {
|
||
if (this.firstLoad) {
|
||
this.loadSwiper();
|
||
}
|
||
}
|
||
this.updateSwiper(this.value, this.options, this.children);
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// #ifdef VUE2
|
||
beforeDestroy() {
|
||
if (this.swiper && !this.swiper.destroyed) {
|
||
this.swiper.destroy(true, false);
|
||
}
|
||
},
|
||
// #endif
|
||
// #ifdef VUE3
|
||
beforeUnmount() {
|
||
if (this.swiper && !this.swiper.destroyed) {
|
||
this.swiper.destroy(true, false);
|
||
}
|
||
},
|
||
// #endif
|
||
methods: {
|
||
loadSwiper() {
|
||
let swiperParams = this.swiperParams;
|
||
this.slidesRef = this.children;
|
||
this.oldSlidesRef = this.slidesRef;
|
||
let swiperRef = initSwiper(swiperParams, {
|
||
...this.$data,
|
||
...this.$props,
|
||
swiperElId: 'swiper' + this._uid,
|
||
emit: this.emit.bind(this),
|
||
updateData: this.updateData.bind(this),
|
||
getRect: this.getRect.bind(this),
|
||
getRectScrollbar: this.getRectScrollbar.bind(this),
|
||
willChange: this.willChange.bind(this),
|
||
transform: this.transform.bind(this),
|
||
transition: this.transition.bind(this),
|
||
scrollbarTransform: this.scrollbarTransform.bind(this),
|
||
scrollbarTransition: this.scrollbarTransition.bind(this),
|
||
scrollbarItemTransform: this.scrollbarItemTransform.bind(this),
|
||
scrollbarItemTransition: this.scrollbarItemTransition.bind(this),
|
||
addClass: this.addClass.bind(this),
|
||
removeClass: this.removeClass.bind(this),
|
||
addPaginationClass: this.addPaginationClass.bind(this),
|
||
removePaginationClass: this.removePaginationClass.bind(this),
|
||
addScrollbarClass: this.addScrollbarClass.bind(this),
|
||
removeScrollbarClass: this.removeScrollbarClass.bind(this),
|
||
setCss: this.setCss.bind(this),
|
||
css: this.setCss.bind(this),
|
||
paginationCss: this.setPaginationCss.bind(this),
|
||
scrollbarCss: this.scrollbarCss.bind(this),
|
||
scrollbarItemCss: this.scrollbarItemCss.bind(this),
|
||
addNextElClass: this.addNextElClass.bind(this),
|
||
addPrevElClass: this.addPrevElClass.bind(this),
|
||
removeNextElClass: this.removeNextElClass.bind(this),
|
||
removePrevElClass: this.removePrevElClass.bind(this),
|
||
cubeShadowCss: this.cubeShadowCss.bind(this),
|
||
cubeShadowTransform: this.cubeShadowTransform.bind(this),
|
||
cubeShadowTransition: this.cubeShadowTransition.bind(this),
|
||
});
|
||
this.swiper = swiperRef;
|
||
swiperRef.loopCreate = () => {};
|
||
swiperRef.loopDestroy = () => {};
|
||
if (swiperParams.loop) {
|
||
swiperRef.loopedSlides = calcLoopedSlides(this.slidesRef, swiperParams);
|
||
}
|
||
|
||
if (!this.swiper) return;
|
||
mountSwiper({
|
||
el: this.swiperElRef,
|
||
nextEl: this.nextElRef,
|
||
prevEl: this.prevElRef,
|
||
paginationEl: this.paginationElRef,
|
||
scrollbarEl: this.scrollbarElRef,
|
||
swiper: this.swiper,
|
||
},
|
||
this.swiperParams,
|
||
);
|
||
this.$emit('swiper');
|
||
this.firstLoad = false;
|
||
},
|
||
updateSwiper(value, options, children) {
|
||
this.swiper.slides = children;
|
||
this.slidesRef = children;
|
||
let initializedRef = this.initializedRef;
|
||
let swiperRef = this.swiper;
|
||
let slidesRef = this.slidesRef;
|
||
let oldPassedParamsRef = this.oldPassedParamsRef;
|
||
let oldSlidesRef = this.oldSlidesRef;
|
||
let breakpointChanged = this.breakpointChanged;
|
||
let nextElRef = this.nextElRef;
|
||
let prevElRef = this.prevElRef;
|
||
let paginationElRef = this.paginationElRef;
|
||
let scrollbarElRef = this.scrollbarElRef;
|
||
// set initialized flag
|
||
if (!initializedRef && swiperRef) {
|
||
swiperRef.emitSlidesClasses();
|
||
initializedRef = true;
|
||
}
|
||
// watch for params change
|
||
const {
|
||
passedParams: newPassedParams
|
||
} = getParams(options);
|
||
const changedParams = getChangedParams(
|
||
newPassedParams,
|
||
oldPassedParamsRef,
|
||
slidesRef,
|
||
oldSlidesRef,
|
||
);
|
||
this.oldPassedParamsRef = newPassedParams;
|
||
this.oldSlidesRef = slidesRef;
|
||
if (
|
||
(changedParams.length || breakpointChanged) &&
|
||
swiperRef &&
|
||
!swiperRef.destroyed
|
||
) {
|
||
updateSwiper({
|
||
swiper: swiperRef,
|
||
slides: slidesRef,
|
||
passedParams: newPassedParams,
|
||
changedParams,
|
||
nextEl: nextElRef,
|
||
prevEl: prevElRef,
|
||
scrollbarEl: scrollbarElRef,
|
||
paginationEl: paginationElRef,
|
||
});
|
||
}
|
||
breakpointChanged = false;
|
||
},
|
||
emit(event, data) {
|
||
this.$emit(event, ...data)
|
||
},
|
||
async getRect() {
|
||
let rectInfo = await getRect(this, '.swiper');
|
||
this.rectInfo = rectInfo;
|
||
return rectInfo;
|
||
},
|
||
async getRectScrollbar() {
|
||
let rectInfo = await getRect(this, '.swiper-scrollbar');
|
||
return rectInfo;
|
||
},
|
||
updateData(value) {
|
||
Object.keys(value).forEach((item) => {
|
||
this.$set(this, item, value[item])
|
||
})
|
||
},
|
||
willChange(value) {
|
||
this.$set(this.wrapperStyle, 'will-change', value)
|
||
},
|
||
transform(value) {
|
||
// #ifndef MP-WEIXIN || MP-QQ
|
||
this.$set(this.wrapperStyle, 'transform', value)
|
||
// #endif
|
||
// #ifdef MP-WEIXIN || MP-QQ
|
||
this.wxsTransform = value;
|
||
// #endif
|
||
},
|
||
transition(value) {
|
||
// #ifdef MP-BAIDU
|
||
this.$set(this.wrapperStyle, 'transitionDuration', `${value}ms`)
|
||
// #endif
|
||
// #ifndef MP-BAIDU
|
||
this.$set(this.wrapperStyle, 'transition-duration', `${value}ms`)
|
||
// #endif
|
||
},
|
||
setCss(value) {
|
||
Object.keys(value).forEach((item) => {
|
||
this.$set(this.wrapperStyle, item, value[item])
|
||
})
|
||
},
|
||
scrollbarTransform(value) {
|
||
this.$set(this.scrollbarStyle, 'transform', value)
|
||
},
|
||
scrollbarTransition(value) {
|
||
this.$set(this.scrollbarStyle, 'transitionDuration', `${value}ms`)
|
||
},
|
||
scrollbarItemTransform(value) {
|
||
this.$set(this.scrollbarItemStyle, 'transform', value)
|
||
},
|
||
scrollbarItemTransition(value) {
|
||
this.$set(this.scrollbarItemStyle, 'transitionDuration', `${value}ms`)
|
||
},
|
||
addClass(value) {
|
||
// #ifdef MP-ALIPAY || MP-TOUTIAO
|
||
this.contentClass = Array.from(new Set([...this.contentClass.split(" "), ...value.split(" ")])).join(" ");
|
||
// #endif
|
||
// #ifndef MP-ALIPAY || MP-TOUTIAO
|
||
this.contentClass = Array.from(new Set([...this.contentClass, ...value.split(" ")]));
|
||
// #endif
|
||
},
|
||
removeClass(value) {
|
||
// #ifdef MP-ALIPAY || MP-TOUTIAO
|
||
this.contentClass = this.contentClass.split(" ").filter(item => !value.split(" ").includes(item)).join(
|
||
" ");
|
||
// #endif
|
||
// #ifndef MP-ALIPAY || MP-TOUTIAO
|
||
this.contentClass = this.contentClass.filter(item => !value.split(" ").includes(item));
|
||
// #endif
|
||
},
|
||
addPaginationClass(value) {
|
||
this.paginationElClass = Array.from(new Set([...this.paginationElClass, ...value.split(" ")]));
|
||
},
|
||
removePaginationClass(value) {
|
||
this.paginationElClass = this.paginationElClass.filter(item => !value.split(" ").includes(item));
|
||
},
|
||
addScrollbarClass(value) {
|
||
this.scrollbarElClass = Array.from(new Set([...this.scrollbarElClass, ...value.split(" ")]));
|
||
},
|
||
removeScrollbarClass(value) {
|
||
this.scrollbarElClass = this.scrollbarElClass.filter(item => !value.split(" ").includes(item));
|
||
},
|
||
setPaginationCss(value) {
|
||
Object.keys(value).forEach((item) => {
|
||
this.$set(this.paginationStyle, item, value[item])
|
||
})
|
||
},
|
||
scrollbarCss(value) {
|
||
Object.keys(value).forEach((item) => {
|
||
this.$set(this.scrollbarStyle, item, value[item])
|
||
})
|
||
},
|
||
scrollbarItemCss(value) {
|
||
Object.keys(value).forEach((item) => {
|
||
this.$set(this.scrollbarItemStyle, item, value[item])
|
||
})
|
||
},
|
||
addNextElClass(value) {
|
||
this.nextElClass = Array.from(new Set([...this.nextElClass, ...value.split(" ")]));
|
||
},
|
||
addPrevElClass(value) {
|
||
this.prevElClass = Array.from(new Set([...this.prevElClass, ...value.split(" ")]));
|
||
},
|
||
removeNextElClass(value) {
|
||
this.nextElClass = this.nextElClass.filter(item => !value.split(" ").includes(item));
|
||
},
|
||
removePrevElClass(value) {
|
||
this.prevElClass = this.prevElClass.filter(item => !value.split(" ").includes(item));
|
||
},
|
||
setSwiperOn(event, callback) {
|
||
if (!this.eventsListeners[event]) this.eventsListeners[event] = {};
|
||
this.eventsListeners[event] = callback;
|
||
},
|
||
paginationItemClick(index) {
|
||
this.swiper.emit("paginationItemClick", index)
|
||
},
|
||
prevClick() {
|
||
this.swiper.emit("prevClick");
|
||
},
|
||
nextClick() {
|
||
this.swiper.emit("nextClick");
|
||
},
|
||
onTouchStart(event) {
|
||
this.swiper.onTouchStart(event);
|
||
},
|
||
onTouchStartSwiperWxs(event) {
|
||
this.swiper.onTouchStart(event);
|
||
},
|
||
onTouchMove(event) {
|
||
this.swiper.onTouchMove(event);
|
||
},
|
||
onTouchMoveSwiperWxs(event) {
|
||
this.swiper.onTouchMove(event);
|
||
},
|
||
onTouchEnd(event) {
|
||
this.swiper.onTouchEnd(event);
|
||
},
|
||
onTouchEndSwiperWxs(event) {
|
||
this.swiper.onTouchEnd(event);
|
||
},
|
||
onClickWrapper(event) {
|
||
this.$emit("click", event);
|
||
},
|
||
onClickScrollbar(event) {
|
||
this.$emit("scrollbarClick", event);
|
||
},
|
||
onTouchStartScrollbar(event) {
|
||
this.swiper.emit('touchStartScrollbar', event);
|
||
},
|
||
onTouchMoveScrollbar(event) {
|
||
this.swiper.emit('touchMoveScrollbar', event);
|
||
},
|
||
onTouchEndScrollbar(event) {
|
||
this.swiper.emit('touchEndScrollbar', event);
|
||
},
|
||
cubeShadowCss(value) {
|
||
Object.keys(value).forEach((item) => {
|
||
this.$set(this.cubeShadowStyle, item, value[item])
|
||
})
|
||
},
|
||
cubeShadowTransform(value) {
|
||
this.$set(this.cubeShadowStyle, 'transform', value)
|
||
},
|
||
cubeShadowTransition(value) {
|
||
this.$set(this.cubeShadowStyle, 'transitionDuration', `${value}ms`)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import '../../libs/core.scss';
|
||
@import "../../static/css/iconfont.css";
|
||
|
||
.swiper {
|
||
&__prev--button {
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top: 50%;
|
||
display: flex;
|
||
color: #1989fa;
|
||
font-size: 44rpx;
|
||
z-index: 10;
|
||
}
|
||
|
||
&__prev--button--disable {
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top: 50%;
|
||
display: flex;
|
||
color: #1989fa;
|
||
font-size: 44rpx;
|
||
opacity: .35;
|
||
z-index: 10;
|
||
}
|
||
|
||
&__next--button {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 50%;
|
||
display: flex;
|
||
color: #1989fa;
|
||
font-size: 44rpx;
|
||
z-index: 10;
|
||
}
|
||
|
||
&__next--button--disable {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 50%;
|
||
display: flex;
|
||
color: #1989fa;
|
||
font-size: 44rpx;
|
||
opacity: .35;
|
||
z-index: 10;
|
||
}
|
||
}
|
||
</style> |