dreamland/lib/dever/components/swiper.vue

<template name="dever-swiper">
	<view class="index-box">
		<swiper class="swiper" :display-multiple-items="num" @change="change" :vertical="vertical" :circular="circular" :current="swiper_current" :autoplay="autoplay" :interval="interval" :previous-margin="previous_margin" :next-margin="next_margin">
			<swiper-item v-for="(v, k) in getData" :key="k" style="overflow: unset;">
				<slot :k="getKey(k)" :v="v" :i="k"></slot>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	// 无限轮播组件，参考https://blog.csdn.net/qq_40026668/article/details/122236668
	export default {
		props: {
			//传入的数据
			item : {
				type : Array,
				default : []
			},
			//同时显示的滑块数量
			num : {
				type    : Number,
				default	: 1
			},
			//是否可以循环滚动
			circular : {
				type    : Boolean,
				default	: true
			},
			//设置从第几个开始滚动
			current : {
				type    : Number,
				default	: 0
			},
			//是否自动切换
			autoplay : {
				type    : Boolean,
				default	: false
			},
			//自动切换时间间隔
			interval : {
				type    : Number,
				default	: 5000
			},
			//是否竖向
			vertical : {
				type    : Boolean,
				default	: false
			},
			//前边距
			previous_margin : {
				type    : String,
				default	: '0px'
			},
			//后边距
			next_margin : {
				type    : String,
				default	: '0px'
			},
		},
		watch: {
			current: {
				handler(current, old) {
					this.init(current);
					this.finish();
				},
				//deep: true // 深度监听父组件传过来对象变化
			}
		},
		data() {
			return {
				length : 3, // 总的轮播图数量
				swiper_current : 0,
				swiper_index : 0, // 当前轮播图激活索引
				data_index : 0, // 当前展示数据在列表中的索引值
				data : new Array(3),
			}
		},
		created() {
			this.init(this.current);
		},
		computed: {
			getData() {
				// 获取当前值、下一个值、上一个值
				var current_k = this.data_index;
				var next_k = this.getDataIndex(this.data_index + 1);
				var prev_k = this.getDataIndex(this.data_index - 1);
				
				let current = this.item[current_k]
				let next = this.item[next_k]
				let prev = this.item[prev_k]
				
				if (typeof(current) == 'object') {
					current.k = current_k
					next.k = next_k
					prev.k = prev_k
				}

				// 获取当前轮播索引对应的值、下个索引对应的值、上个索引对应的值
				this.data[this.swiper_index] = current
				this.data[this.getIndex(this.swiper_index + 1)] = next
				this.data[this.getIndex(this.swiper_index - 1)] = prev
				return this.data
			},
		},
		methods: {
			init : function(current) {
				this.swiper_index = this.getSwiperIndex(current, 3);
				this.data_index = current;
				this.swiper_current = this.swiper_index;
			},
			getKey : function(k) {
				if (typeof(this.data[k]) == 'object') {
					return this.data[k].k;
				} else {
					return k;
				}
			},
			change : function(event) {
				let current = Number(event.detail.current)
				if (current != this.swiper_index) {
					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
				this.finish()
			},
			finish : function() {
				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
				}
			},
			getSwiperIndex : function(current, length) {
				if (current < (length - 1)) {
					return current
				} else {
					return current % length
				}
			}
		}
	}
</script>
<style scoped lang="scss">
.swiper {
	width: 750rpx;
	height: 100%;
}
swiper-item>view{
  height: 100%;
}
swiper-item image{
  width: 750rpx;
  height: 100%;
}
</style>