dreamland/lib/dever/components/swiper.vue

<template name="dever-swiper">
	<view class="index-box">
		<swiper class="swiper" @change="change" :circular="circular" :current="current" :autoplay="autoplay" :interval="interval">
			<swiper-item v-for="(v, k) in getData" :key="k" >
				<slot :v="v" :k="k"></slot>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	// 无限轮播组件，参考https://blog.csdn.net/qq_40026668/article/details/122236668
	export default {
		props: {
			//传入的数据
			item : {
				type : Array,
				value : []
			},
			//是否可以循环滚动
			circular : {
				type    : Boolean,
				value	: true
			},
			//设置从第几个开始滚动
			current : {
				type    : Number,
				value	: 0
			},
			//是否自动切换
			autoplay : {
				type    : Boolean,
				value	: false
			},
			//自动切换时间间隔
			interval : {
				type    : Number,
				value	: 5000
			}
		},
		data() {
			return {
				swiper_index : 0, // 当前轮播图激活索引
				data_index : 0, // 当前展示数据在列表中的索引值
				length : 3, // 总的轮播图数量
			}
		},
		mounted() {
			this.data_index = this.current;
		},
		computed: {
			getData() {
				// 获取当前值、下一个值、上一个值
				let current = this.item[this.data_index]
				let next = this.item[this.getDataIndex(this.data_index + 1)]
				let prev = this.item[this.getDataIndex(this.data_index - 1)]

				// 获取当前轮播索引对应的值、下个索引对应的值、上个索引对应的值
				let list = new Array(3)
				list[this.swiper_index] = current
				list[this.getIndex(this.swiper_index + 1)] = next
				list[this.getIndex(this.swiper_index - 1)] = prev
				return list
			}
		},
		methods: {
			change : function(event) {
				let current = Number(event.detail.current)
				if ([1, 1 - this.length].includes(current - this.swiper_index)) {
					// 向左滑动
					this.data_index = this.getDataIndex(this.data_index + 1)
				} else {
					// 向右滑动
					this.data_index = this.getDataIndex(this.data_index - 1)
				}
				this.swiper_index = current
				//console.info(this.data_index, this.swiper_index)
				this.$emit('change', this.data_index, this.swiper_index);
			},
			getDataIndex : function(index) {
				if (index < 0) {
					// 小于零，返回数据列表末尾索引
					return this.item.length - 1
				} else if (index >= this.item.length) {
					// 等于（或大于，一般不会）数据列表长度，返回数据首位索引
					return 0
				} else {
					return index
				}
			},
			getIndex : function(index) {
				if (index < 0) {
					return this.length - 1
				} else if (index >= this.length) {
					return 0
				} else {
					return index
				}
			}
		}
	}
</script>
<style scoped lang="scss">
.swiper {
	width: 750rpx;
	height: 100%;
}
swiper-item>view{
  height: 100%;
}
swiper-item image{
  width: 750rpx;
  height: 100%;
}
</style>