232 lines
4.4 KiB
Vue
232 lines
4.4 KiB
Vue
<template>
|
||
<!-- #ifdef APP-VUE || H5 -->
|
||
<view
|
||
class="box"
|
||
:style="boxStyle"
|
||
>
|
||
<view
|
||
ref="container"
|
||
class="container"
|
||
:change:prop="swipe.changeData"
|
||
:prop="wxsData"
|
||
:style="containerStyle"
|
||
@touchstart.stop="swipe.touchstart"
|
||
@touchmove.stop="swipe.touchmove"
|
||
@touchend.stop="swipe.touchend"
|
||
>
|
||
<slot />
|
||
</view>
|
||
<slot name="dot" />
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view
|
||
class="box"
|
||
:style="boxStyle"
|
||
>
|
||
<view
|
||
ref="container"
|
||
class="container"
|
||
:change:prop="swipe.changeData"
|
||
:prop="wxsData"
|
||
:style="containerStyle"
|
||
@touchstart="swipe.touchstart"
|
||
@touchmove="swipe.touchmove"
|
||
@touchend="swipe.touchend"
|
||
>
|
||
<slot />
|
||
</view>
|
||
<slot name="dot" />
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-NVUE -->
|
||
<view
|
||
class="box"
|
||
:style="boxStyle"
|
||
>
|
||
<view
|
||
ref="container"
|
||
class="container"
|
||
:style="containerStyle"
|
||
@horizontalpan="touchstart"
|
||
>
|
||
<slot />
|
||
</view>
|
||
<slot name="dot" />
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- 其他平台使用 js ，长列表性能可能会有影响-->
|
||
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5 -->
|
||
<view
|
||
class="box"
|
||
:style="boxStyle"
|
||
@touchstart="touchstart"
|
||
@touchmove="touchmove"
|
||
@touchend="touchend"
|
||
>
|
||
<view
|
||
ref="container"
|
||
class="container"
|
||
:style="containerStyle"
|
||
>
|
||
<slot />
|
||
</view>
|
||
<slot name="dot" />
|
||
</view>
|
||
<!-- #endif -->
|
||
</template>
|
||
<script src="./mixins/index.wxs" module="swipe" lang="wxs"></script>
|
||
<script>
|
||
import SwiperMixin from "./mixins/base.mixin.js";
|
||
// #ifdef APP-VUE || MP-WEIXIN || H5
|
||
import MpMixin from "./mixins/mpwxs.js";
|
||
// #endif
|
||
// #ifdef APP-NVUE
|
||
import BindingxMixin from "./mixins/bindingx.js";
|
||
// #endif
|
||
// #ifndef APP-PLUS || MP-WEIXIN || H5
|
||
import OtherMixin from "./mixins/mpother.js";
|
||
// #endif
|
||
|
||
const mixins = [
|
||
// #ifdef APP-VUE || MP-WEIXIN || H5
|
||
MpMixin,
|
||
// #endif
|
||
// #ifdef APP-NVUE
|
||
BindingxMixin,
|
||
// #endif
|
||
// #ifndef APP-PLUS || MP-WEIXIN || H5
|
||
OtherMixin,
|
||
// #endif
|
||
SwiperMixin,
|
||
];
|
||
|
||
/**
|
||
* esc-swiper
|
||
* @description 自定义swiper (不支持使用class)
|
||
* @property {String} mode = [normal|3d] 模式
|
||
* @property {Number} scale 3D模式选中项的scale
|
||
* @property {Number} width 宽
|
||
* @property {Number} height 高
|
||
* @property {Number} itemWidth 项宽
|
||
* @property {Number} itemHeight 项高
|
||
* @property {Number} space 间距
|
||
* @property {Number} plus 左右追加个数(开启循环必填，至少为2)
|
||
* @property {Number} current 选中项索引
|
||
* @property {Boolean} autoplay 自动轮播
|
||
* @property {Boolean} circular 是否循环,如果开启，至少需要3项
|
||
* @property {Boolean} bounce 阻尼效果
|
||
* @event {Function} change 索引变化
|
||
*/
|
||
export default {
|
||
name: 'esc-swiper',
|
||
mixins,
|
||
props: {
|
||
mode: {
|
||
type: String,
|
||
default: 'normal'
|
||
},
|
||
scale: Number,
|
||
width: Number,
|
||
height: Number,
|
||
itemWidth: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
itemHeight: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
space: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
plus: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
autoplay: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
current: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
interval: {
|
||
type: Number,
|
||
default: 5000
|
||
},
|
||
duration: {
|
||
type: Number,
|
||
default: 500
|
||
},
|
||
circular: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
bounce: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
size: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
|
||
},
|
||
provide() {
|
||
return {
|
||
config: {
|
||
is3D: this.is3D,
|
||
isCircular: this.circular,
|
||
scale: this.scale,
|
||
size: this._size,
|
||
width: this.width,
|
||
height: this.height,
|
||
itemWidth: this.itemWidth,
|
||
itemHeight: this.itemHeight,
|
||
space: this.space,
|
||
plus: this.plus
|
||
}
|
||
};
|
||
},
|
||
mounted() {
|
||
if (this.autoplay) {
|
||
this.autoplayInterval = setInterval(() => {
|
||
this.next();
|
||
}, this.interval);
|
||
}
|
||
},
|
||
watch: {
|
||
autoplay(newV) {
|
||
if (!newV) {
|
||
clearInterval(this.autoplayInterval);
|
||
} else {
|
||
this.autoplayInterval = setInterval(() => {
|
||
this.next();
|
||
}, this.interval);
|
||
}
|
||
}
|
||
},
|
||
methods: {}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.box {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.container {
|
||
position: absolute;
|
||
top: 0;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
</style>
|