轮播图组件更加完善版
依然是基于微博语法开发,使用时请注意标签替换
优化了滑动的效果,默认的索引,滑动距离等,
使用方式和以前一样没变,主要修改了组件内部
<template>
<wbx-view class="" style="width: 100vw;height: 70vh;">
<wbx-view style="margin-top: 100px; margin-left: 100px;margin-bottom: 20px;">
<WBXswiper @change="gaibian" :vertical="false" :current="5" indicatorActiveColor="#fff" indicatorColor="#c0c0c0" :originalData="items" style="width: 200px;height: 200px;border-radius: 20px;">
<template slot="swiperItem" slot-scope="scope">
<wbx-image :src="scope.item.src" mode="scaleToFill" style="width:200px; height: 200px;" />
</template>
</WBXswiper>
</wbx-view>
</wbx-view>
</template>
<script>
/**
* @type WBXAppOption
*/
import WBXswiper from "../../commpents/WBXswiper/index.vue";
const pageOptions = {
data() {
return {
items: [{
src: 'res/001.jpg',
txt:222222
},
{
src: 'res/001.jpg',
txt:222222
},{
src: 'res/001.jpg',
txt:222222
},{
src: 'res/001.jpg',
txt:222222
},{
src: 'res/001.jpg',
txt:222222
}],
current:0
}
},
computed:{
},
methods: {
gaibian(e){
},
add(index){
this.current=index
}
},
components: {
WBXswiper,
},
wbox: {
onLoad() { },
onShow() {
// 页面显示/切入前台时触发
},
onHide() {
// 页面隐藏时触发
},
onUnload() {
// 页面退出时触发
},
},
mounted() { },
};
export default pageOptions;
</script>
<style></style>
已下是组件内部
<template>
<wbx-view
ref="objStyle"
:style="wrapperStyle"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
>
<wbx-view
class="carousel-wrapper"
:style="carouselStyle"
@transitionend="onTransitionEnd"
ref="carouselWrapper"
>
<wbx-view :style="itemStyle">
<slot name="swiperItem" :item="originalData[originalData.length - 1]"></slot>
</wbx-view>
<wbx-view v-for="(item, index) in originalData" :key="index" :style="itemStyle">
<slot name="swiperItem" :item="item"></slot>
</wbx-view>
<wbx-view :style="itemStyle">
<slot name="swiperItem" :item="originalData[0]"></slot>
</wbx-view>
</wbx-view>
<wbx-view v-if="indicatorDots" :style="{ width: containerWidth + 'px' }" style="position: absolute; bottom: 10px; display: flex; flex-direction: row; justify-content: center;">
<wbx-view
v-for="(item, index) in originalData"
:key="index"
:style="{ backgroundColor: index === realIndex ? indicatorActiveColor : indicatorColor }"
style="width: 10px; height: 10px; margin: 0 5px; cursor: pointer; border-radius: 10px;"
@click~stop="setCurrentIndex(index)"
></wbx-view>
</wbx-view>
</wbx-view>
</template>
<script>
/*
originalData 数据
autoPlay 是否自动播放
interval 自动播放间隔时间
indicatorDots 是否显示指示点
indicatorColor 指示点颜色
indicatorActiveColor 当前选中的指示点颜色
current 当前所在滑块的index
vertical 滑动方向是否为纵向
@change 轮播图改变时会触发 change 事件,返回当前索引值
*/
export default {
props: {
originalData: {
type: Array,
required: true
},
autoPlay: {
type: Boolean,
default: false
},
interval: {
type: Number,
default: 3000
},
indicatorDots: {
type: Boolean,
default: true
},
indicatorColor: {
type: String,
default: '#c0c0c0'
},
indicatorActiveColor: {
type: String,
default: '#fff'
},
current: {
type: String,
default: ''
},
vertical: {
type: Boolean,
default: false
}
},
data() {
return {
currentIndex: 1,
timer: null,
startX: 0,
startY: 0,
offset: 0,
isTransitioning: false,
containerWidth: 0,
containerHeight: 0,
userCurrent:false,
userCurrentStare:false,
};
},
watch: {
current: {
handler(newVal) {
this.userCurrent=true
this.setCurrentIndex(newVal);
},
immediate: true
}
},
computed: {
wrapperStyle() {
return {
position: "relative",
width: `${this.wrapperWidth}px`,
height: `${this.wrapperHeight}px`,
};
},
carouselStyle() {
const baseTranslateValue = -this.currentIndex * (this.vertical ? this.containerHeight : this.containerWidth);
const translateValue = baseTranslateValue + this.offset;
return {
display: 'flex',
flexDirection: this.vertical ? 'column' : 'row',
transform: this.vertical ? `translateY(${translateValue}px)` : `translateX(${translateValue}px)`,
transition: this.isTransitioning ? 'transform 0.3s ease-out' : 'none',
width: !this.vertical ? `${this.wrapperWidth}px` : `${this.containerWidth}px`,
height: this.vertical ? `${this.wrapperHeight}px` : `${this.containerWidth}px`
};
},
wrapperWidth() {
return this.containerWidth * (this.originalData.length + 2);
},
wrapperHeight() {
return this.containerHeight * (this.originalData.length + 2);
},
itemStyle() {
return {
width: !this.vertical ? `${this.containerWidth}px` : `${this.containerWidth}px`,
height: this.vertical ? `${this.containerHeight}px` : `${this.containerWidth}px`,
flexShrink: 0
};
},
realIndex() {
return (this.currentIndex - 1 + this.originalData.length) % this.originalData.length;
}
},
mounted() {
this.updateDimensions();
this.$nextTick(() => {
if (this.autoPlay) {
this.startAutoPlay();
}
});
},
beforeDestroy() {
this.stopAutoPlay();
},
methods: {
updateDimensions() {
if (this.$refs.objStyle) {
const objStyle = this.$refs.objStyle.styleObject
this.containerWidth = parseFloat(objStyle.width);
this.containerHeight = parseFloat(objStyle.height);
}
},
startAutoPlay() {
this.timer = setInterval(() => {
this.next();
}, this.interval);
},
stopAutoPlay() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
next() {
this.offset = 0;
this.isTransitioning = true;
this.currentIndex += 1;
this.$emit('change', { current: this.currentIndex });
},
prev() {
this.offset = 0;
this.isTransitioning = true;
this.currentIndex -= 1;
this.$emit('change', { current: this.currentIndex });
},
setCurrentIndex(index) {
this.stopAutoPlay();
if (this.current !== '') {
// 传值情况
this.userCurrentStare = this.userCurrent ? true : !this.userCurrentStare;
} else {
// 不传值情况
this.userCurrentStare = index !== '';
}
this.currentIndex = index + 1;
if (this.autoPlay) {
this.startAutoPlay();
}
},
onTouchStart(e) {
this.startX = e.touches[0].clientX;
this.startY = e.touches[0].clientY;
this.offset = 0;
this.stopAutoPlay();
},
onTouchMove(e) {
const moveX = e.touches[0].clientX;
const moveY = e.touches[0].clientY;
if(this.vertical){
if(moveY - this.startY>=this.containerHeight){
this.offset=this.containerHeight
}else if(moveY - this.startY<= -this.containerHeight){
this.offset=-this.containerHeight
}else{
this.offset= moveY - this.startY;
}
}else{
if(moveX - this.startX>=this.containerWidth){
this.offset=this.containerWidth
}else if(moveX - this.startX<= -this.containerWidth){
this.offset=-this.containerWidth
}else{
this.offset= moveX - this.startX;
}
}
},
onTouchEnd() {
this.isTransitioning = true;
if (Math.abs(this.offset) > (this.vertical ? this.containerHeight : this.containerWidth) /6) {
if (this.offset > 0) {
this.prev();
} else {
this.next();
}
} else {
this.offset = 0;
}
if (this.autoPlay) {
this.startAutoPlay();
}
},
onTransitionEnd() {
this.isTransitioning = false;
this.offset = 0;
if (this.currentIndex === this.originalData.length + 1) {
this.currentIndex = 1;
}
if (this.currentIndex === 0) {
this.currentIndex = this.originalData.length;
}
}
}
};
</script>
<style>
</style>
原文地址:https://blog.csdn.net/m0_60053251/article/details/142559794
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!