轮播图组件更加完善版
依然是基于微博语法开发，使用时请注意标签替换
优化了滑动的效果，默认的索引，滑动距离等，
使用方式和以前一样没变，主要修改了组件内部
<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-viewref="objStyle":style="wrapperStyle"@touchstart="onTouchStart"@touchmove="onTouchMove"@touchend="onTouchEnd"><wbx-viewclass="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-viewv-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 当前所在滑块的indexvertical 滑动方向是否为纵向@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=truethis.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.styleObjectthis.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>