会员权益
This commit is contained in:
732
uni_modules/zebra-swiper/components/z-swiper/z-swiper.vue
Normal file
732
uni_modules/zebra-swiper/components/z-swiper/z-swiper.vue
Normal file
@@ -0,0 +1,732 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user